refactor(report): migrate to lit.js (#567)

* refactor(report): migrate to lit.js

* Update public/components/views/home/report/report.js

Co-authored-by: PierreDemailly <39910767+PierreDemailly@users.noreply.github.com>

---------

Co-authored-by: PierreDemailly <39910767+PierreDemailly@users.noreply.github.com>

Author: clemgbld

public/components/views/home/home.css

@@ -1,5 +1,4 @@
 @import url("./maintainers/maintainers.css");
-@import url("./report/report.css");
 
 #home--view {
   z-index: 10;

public/components/views/home/home.js

@@ -12,7 +12,7 @@ import { fetchScorecardData, getScorecardLink } from "../../../common/scorecard.
 
 // Import Components
 import { Maintainers } from "./maintainers/maintainers.js";
-import { PopupReport } from "./report/report.js";
+import "./report/report.js";
 
 // CONSTANTS
 const kFlagsToWatch = new Set([
@@ -390,9 +390,14 @@ export class HomeView {
 
   handleReport() {
     document.querySelector(".home--header--report").addEventListener("click", async() => {
+      const popupReport = document.createElement("popup-report");
+      popupReport.rootDependencyName = this.secureDataSet.data.rootDependencyName;
+      popupReport.theme = this.secureDataSet.theme;
+      const fragment = document.createDocumentFragment();
+      fragment.appendChild(popupReport);
       window.dispatchEvent(new CustomEvent(EVENTS.MODAL_OPENED, {
         detail: {
-          content: new PopupReport(this.secureDataSet.data.rootDependencyName).render()
+          content: fragment
         }
       }));
     });