From 62384b13a48a80d498638455a00e17d0897cc7c2 Mon Sep 17 00:00:00 2001
From: Ralph Saunders <ralphsaunders@users.noreply.github.com>
Date: Tue, 22 Mar 2022 20:00:19 +0000
Subject: [PATCH] Prevent CSS conflicts breaking UI (#65)

Renders UI to ShadowDOM elements, preventing external CSS rules
interferring with desired import-map UI.
---
 src/ui/custom-elements.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/ui/custom-elements.js b/src/ui/custom-elements.js
index bdc077b..8af9250 100644
--- a/src/ui/custom-elements.js
+++ b/src/ui/custom-elements.js
@@ -1,4 +1,4 @@
-import "./import-map-overrides.css";
+import styles from "./import-map-overrides.css";
 import { render, h } from "preact";
 import FullUI from "./full-ui.component";
 import Popup from "./popup.component";
@@ -36,11 +36,15 @@ function preactCustomElement(Comp, observedAttributes = []) {
       this.renderWithPreact();
     }
     renderWithPreact() {
+      this.shadow = this.attachShadow({ mode: "open" });
       this.renderedEl = render(
         h(Comp, { customElement: this }),
-        this,
+        this.shadow,
         this.renderedEl
       );
+      const style = document.createElement("style");
+      style.textContent = styles.toString();
+      this.shadow.appendChild(style);
     }
   };
 }