html-demo-element - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

html-demo-element.js

@@ -8,22 +8,9 @@ import "https://unpkg.com/prismjs@1.29.0/components/prism-core.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') )
@@ -49,3 +36,3 @@ el.initialHTML = el.innerHTML;
 
-    static version = '1.0.10';
+    static version = '1.0.11';
 
@@ -132,2 +119,17 @@ get source(){ return this._source }
         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();
@@ -134,0 +136,0 @@ }

package.json

 {
     "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",
@@ -5,0 +5,0 @@ "author": "Sasha Firsov",

README.md

@@ -18,3 +18,3 @@ # 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>
@@ -55,4 +55,4 @@ ```
 # 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
@@ -59,0 +59,0 @@

No alert changes

Improved metrics

Total package byte prevSize

121429

increased by0.11%

Lines of code

198

increased by0.51%

No dependency changes