Merge pull request #72 from github/use-shadow-dom-for-css

Set host element to a block its Shadow DOM
github · Feb 16, 2022 · 324d9b5 · 324d9b5
2 parents aaac785 + 4e090eb
commit 324d9b5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "clean": "rm -rf dist",
     "lint": "eslint . --ext .js,.ts && tsc --noEmit",
     "prebuild": "npm run clean && npm run lint && mkdir dist",
-    "build": "tsc && cp src/index.css dist/index.css",
+    "build": "tsc",
     "pretest": "npm run build",
     "test": "karma start ./test/karma.config.cjs",
     "prepublishOnly": "npm run build",

diff --git a/src/index.css b/src/index.css
diff --git a/src/index.ts b/src/index.ts
@@ -161,6 +161,17 @@ export default class IncludeFragmentElement extends HTMLElement {
     }
   }
 
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).innerHTML = `
+      <style> 
+        :host {
+          display: block;
+        }
+      </style>
+      <slot></slot>`
+  }
+
   connectedCallback(): void {
     if (this.src && this.loading === 'eager') {
       handleData(this)