From 5503d04bed14ff004b507dfd3c17b095b9f1773c Mon Sep 17 00:00:00 2001 From: Sasha Firsov Date: Sun, 3 Nov 2024 09:28:08 -0800 Subject: [PATCH] 1.0.11 dynamically injected html-demo-element handling added --- README.md | 6 +++--- html-demo-element.js | 38 ++++++++++++++++++++------------------ package.json | 2 +- 3 files changed, 24 insertions(+), 22 deletions(-) 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",