From 4e090ebb4689d6c49dd2bbf85d6dafb6d98d8fa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= <koddsson@gmail.com>
Date: Mon, 14 Feb 2022 16:25:17 +0000
Subject: [PATCH] Set host element to a block its Shadow DOM

---
 package.json  |  2 +-
 src/index.css |  4 ----
 src/index.ts  | 11 +++++++++++
 3 files changed, 12 insertions(+), 5 deletions(-)
 delete mode 100644 src/index.css

diff --git a/package.json b/package.json
index beaece3..b829b2e 100644
--- 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
deleted file mode 100644
index 3e71e85..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,4 +0,0 @@
-include-fragment {
-  /* Normalize as a block element across all browsers */
-  display: block;
-}
diff --git a/src/index.ts b/src/index.ts
index edb4f59..8928736 100644
--- 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)