Set host element to a block its Shadow DOM

koddsson · koddsson · commit 4e090ebb4689 · 2022-02-14T16:25:17.000Z
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)
