diff --git a/README.md b/README.md
index adfb980..6693ff6 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ The code
-
+
```
@@ -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
index bba17e8..9a56032 100644
--- 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
index a685d65..3558bd0 100644
--- 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",