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

Set host element to a block its Shadow DOM

Author: koddsson

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",

src/index.css

@@ -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)