1.0.11

dynamically injected html-demo-element handling added
sashafirsov · Nov 3, 2024 · 5503d04 · 5503d04
1 parent 916f847
commit 5503d04
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ The code
     </slotted-element>
 </html-demo-element>
 
-<script type="module" src="https://unpkg.com/html-demo-element@1.0.10/html-demo-element.js"></script>
+<script type="module" src="https://unpkg.com/html-demo-element@1.0.11/html-demo-element.js"></script>
 <script type="module" src="https://unpkg.com/slotted-element@1.0.3/slotted-element.js"></script>
 ```
 
@@ -51,8 +51,8 @@ When you want to control where the source is located and where to render the cod
 ```
 
 # Live demo
-* https://unpkg.com/html-demo-element@1.0.10/demo/index.html
-* https://unpkg.com/html-demo-element@1.0.10/demo/advanced.html
+* https://unpkg.com/html-demo-element@1.0.11/demo/index.html
+* https://unpkg.com/html-demo-element@1.0.11/demo/advanced.html
 * https://unpkg.com/slotted-element@1.0.3/demo/index.html
 
 # API

diff --git a/html-demo-element.js b/html-demo-element.js
@@ -5,25 +5,12 @@ import "https://unpkg.com/prismjs@1.29.0/components/prism-clike.min.js";
 import "https://unpkg.com/prismjs@1.29.0/components/prism-javascript.min.js";
 import "https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js";
 
-const createCss = ( text, el = document.createElement( "style" ) ) =>
-{   el.type = "text/css";
+const createCss = ( text, parent ) =>
+{ const el = document.createElement( "style" ) ;
+    el.type = "text/css";
     el.innerText = text;
-    document.head.appendChild( el );
+    parent.appendChild( el );
 };
-createCss(`
-    @import "https://unpkg.com/prismjs@1.29.0/themes/prism.css";
-    html-demo-element{ display: block; border: blueviolet dashed 1px; border-radius: 1rem; overflow: hidden; }
-    html-demo-element>*{ margin: 1rem; }
-    [slot="legend"],[slot="description"]{ margin: 0; background-color: silver; }
-    [slot="legend"]>h3{ margin: 0; padding: 1rem; }
-    [slot="legend"]{ border-radius: 1rem 1rem 0 0; }
-    [slot="description"]+
-    [slot="legend"]{ border-radius: 0 0 1rem 1rem; }
-    [slot="description"]{ padding: 0 1rem 1rem 1rem; dd{ padding: 0 !important;margin: 0; }}
-    [slot="description"]:has(+[slot="legend"]) { padding-bottom: 0; padding-top: 1rem; }
-
-    pre{overflow:auto;}
-`);
 
 for( let el of document.querySelectorAll('html-demo-element') )
     el.initialHTML = el.innerHTML;
@@ -45,7 +32,7 @@ HtmlDemoElement extends HTMLElement
     static get observedAttributes(){ return Object.keys(propTypes); }
     static get properties(){ return  propTypes; }
 
-    static version = '1.0.10';
+    static version = '1.0.11';
 
     get source(){ return this._source }
     set source( s )
@@ -127,6 +114,21 @@ HtmlDemoElement extends HTMLElement
         }else
             demoDom.map( el=> this.demoSlot.append(el));
         this.isInitialized = 1;
+        createCss(`
+            @import "https://unpkg.com/prismjs@1.29.0/themes/prism.css";
+            html-demo-element{ display: block; border: blueviolet dashed 1px; border-radius: 1rem; overflow: hidden; }
+            html-demo-element>*{ margin: 1rem; }
+            [slot="legend"],[slot="description"]{ margin: 0; background-color: silver; }
+            [slot="legend"]>h3{ margin: 0; padding: 1rem; }
+            [slot="legend"]{ border-radius: 1rem 1rem 0 0; }
+            [slot="description"]+
+            [slot="legend"]{ border-radius: 0 0 1rem 1rem; }
+            [slot="description"]{ padding: 0 1rem 1rem 1rem; dd{ padding: 0 !important;margin: 0; }}
+            [slot="description"]:has(+[slot="legend"]) { padding-bottom: 0; padding-top: 1rem; }
+        
+            pre{overflow:auto;}
+        `, this);
+
         this.render();
     }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "html-demo-element",
-    "version": "1.0.10",
+    "version": "1.0.11",
     "description": "Webcomponent inserts prism JS syntax colored HTML in html-demo-element before actual dom",
     "author": "Sasha Firsov",
     "license": "Apache-2.0",