@epa-wg/custom-element 0.0.10 → 0.0.11

package/custom-element.js

@@ -1,46 +1,27 @@
 const XML_DECLARATION = '<?xml version="1.0" encoding="UTF-8"?>'
-,     XSL_NS_URL      = 'http://www.w3.org/1999/XSL/Transform';
+,          XSL_NS_URL = 'http://www.w3.org/1999/XSL/Transform'
+,          DCE_NS_URL ="urn:schemas-epa-wg:dce";
 
 // const log = x => console.debug( new XMLSerializer().serializeToString( x ) );
 
 const attr = (el, attr)=> el.getAttribute(attr)
-,   create = ( tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElement( tag ));
+,   create = ( tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElement( tag ))
+,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ));
 
     function
 xml2dom( xmlString )
 {
     return new DOMParser().parseFromString( XML_DECLARATION + xmlString, "application/xml" )
 }
-
     function
-bodyXml( dce )
-{
-    const t = dce.firstElementChild
-    , sanitize = s => s.replaceAll("<html:","<")
-                       .replaceAll("</html:","</")
-                       .replaceAll( />\s*<\/xsl:value-of>/g ,"/>")
-                       .replaceAll( />\s*<\/(br|hr|img|area|base|col|embed|input|link|meta|param|source|track|wbr)>/g ,"/>");
-    if( t?.tagName === 'TEMPLATE')
-        return sanitize( new XMLSerializer().serializeToString( t.content ) );
-
-    const s = new XMLSerializer().serializeToString( dce );
-    return sanitize( s.substring( s.indexOf( '>' ) + 1, s.lastIndexOf( '<' ) ) );
-}
-
-    function
-slot2xsl( s )
-{
-    const v = document.createElementNS( XSL_NS_URL, 'value-of' );
-    v.setAttribute( 'select', `//*[@slot="${ s.name }"]` );
-    s.parentNode.replaceChild( v, s );
-}
+xmlString(doc){ return new XMLSerializer().serializeToString( doc ) }
 
     function
 injectData( root, sectionName, arr, cb )
 {
     const inject = ( tag, parent, s ) =>
     {
-        parent.append( s = create( tag ) );
+        parent.append( s = createNS( DCE_NS_URL, tag ) );
         return s;
     };
     const l = inject( sectionName, root );
@@ -91,7 +72,106 @@ Json2Xml( o, tag )
     return ret.join('\n');
 }
 
-    function
+    export function
+createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
+{
+    if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
+        return templateNode
+    const dom = xml2dom(
+`<xsl:stylesheet version="1.0"
+    xmlns:xsl="${ XSL_NS_URL }"
+    >
+    <xsl:output method="html" />
+
+    <xsl:template match="/">
+        <xsl:for-each select="//attributes">
+            <xsl:call-template name="attributes"/>\t
+        </xsl:for-each>
+    </xsl:template>
+    <xsl:template name="slot" >
+        <xsl:param name="slotname" />
+        <xsl:param name="defaultvalue" />
+        <xsl:choose>
+            <xsl:when test="//payload/*[@slot=$slotname]">
+                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:copy-of select="$defaultvalue"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+    <xsl:template name="attributes"></xsl:template>
+    <xsl:variable name="slottemplate">
+        <xsl:call-template name="slot" >
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template>
+    </xsl:variable>
+</xsl:stylesheet>`
+    );
+
+    const attrsTemplate = dom.documentElement.lastElementChild.previousElementSibling
+    , getTemplateRoot = n => n.documentElement || n.firstElementChild?.content || n.content || n.body || n
+    , tc = getTemplateRoot(templateNode)
+    , cc = tc?.childNodes || [];
+    if( (tc instanceof CustomElement) || tc.nodeType===11) {
+        for( let c of cc )
+            attrsTemplate.append(dom.importNode(c,true))
+    }else
+    {
+        attrsTemplate.append(dom.importNode(tc,true))
+    }
+
+    const slot2xsl = s =>
+    {   const v = dom.firstElementChild.lastElementChild.lastElementChild.cloneNode(true);
+        v.firstElementChild.setAttribute('select',`'${s.name}'`)
+        for( let c of s.childNodes)
+            v.lastElementChild.append(c)
+        return v
+    }
+
+    for( const s of attrsTemplate.querySelectorAll('slot') )
+        s.parentNode.replaceChild( slot2xsl(s), s )
+
+    // apply bodyXml changes
+    return dom
+}
+    export async function
+xhrTemplate(src)
+{
+    const dom = await new Promise((resolve,reject)=>
+    {   const xhr = new XMLHttpRequest();
+        xhr.open("GET", src);
+        xhr.responseType = "document";
+        // xhr.overrideMimeType("text/xml");
+        xhr.onload = () =>
+        {   if( xhr.readyState === xhr.DONE && xhr.status === 200 )
+                resolve( xhr.responseXML ||  create('div', xhr.responseText ) )
+            reject(xhr.statusText)
+        };
+        xhr.addEventListener("error", ev=>reject(ev) );
+
+        xhr.send();
+    })
+    return dom
+}
+    export function
+deepEqual(a, b, O=false)
+{
+    if( a === b )
+        return true;
+
+    if( (typeof a !== "object" || a === null) || (typeof b !== "object" || b === null)
+        || Object.keys(a).length !== Object.keys(b).length )
+        return O;
+
+    for( let k in a )
+        if( !(k in b) || !deepEqual( a[k], b[k] ) )
+            return O
+    return true;
+}
+
+    export function
 injectSlice( x, s, data )
 {
     const isString = typeof data === 'string' ;
@@ -100,36 +180,67 @@ injectSlice( x, s, data )
         ? create(s, data)
         : document.adoptNode( xml2dom( Json2Xml( data, s ) ).documentElement);
     [...x.children].filter( e=>e.localName === s ).map( el=>el.remove() );
+    el.data = data
         x.append(el);
 }
 
+function forEach$( el, css, cb){
+    if( el.querySelectorAll )
+        for( let n of el.querySelectorAll(css) )
+            cb(n)
+}
+const getByHashId = ( n, id )=> ( p => n===p? null: (p && ( p.querySelector(id) || getByHashId(p,id) ) ))( n.getRootNode() )
+const loadTemplateRoots = async ( src, dce )=>
+{
+    if( !src || !src.trim() )
+        return [dce]
+    if( src.startsWith('#') )
+        return ( n =>
+        {   if(!n) return []
+            const a = n.querySelectorAll(src)
+            if( a.length )
+                return [...a]
+            const r = n.getRootNode();
+            return r===n ? []: getByHashId(r)
+        })(dce.parentElement)
+    try
+    {   // todo cache
+        const dom = await xhrTemplate(src)
+        const hash = new URL(src, location).hash
+        if( hash )
+        {   const ret = dom.querySelectorAll(hash);
+            if( ret.length )
+                return [...ret]
+            return [dce]
+        }
+        return [dom]
+    }catch (error){ return [dce]}
+}
     export class
 CustomElement extends HTMLElement
 {
-    constructor()
+    async connectedCallback()
     {
-        super();
+        const templateRoots = await loadTemplateRoots( attr( this, 'src' ), this )
+        , templateDocs = templateRoots.map( n => createXsltFromDom( n ) )
+        , xp = templateDocs.map( (td, p) =>{ p = new XSLTProcessor(); p.importStylesheet( td ); return p })
+
+        Object.defineProperty( this, "xsltString", { get: ()=>xp.map( td => xmlString(td) ).join('\n') });
 
-        [ ...this.templateNode.querySelectorAll('slot') ].forEach( slot2xsl );
-        const p = new XSLTProcessor();
-        p.importStylesheet( this.xslt );
         const tag = attr( this, 'tag' );
         const dce = this;
         const sliceNames = [...this.templateNode.querySelectorAll('[slice]')].map(e=>attr(e,'slice'));
-        tag && window.customElements.define( tag, class extends HTMLElement
+        class DceElement extends HTMLElement
         {
-            constructor()
-            {
-                super();
-                const x = create( 'div' );
-                injectData( x, 'payload', this.childNodes, assureSlot );
-                injectData( x, 'attributes', this.attributes, e => create( e.nodeName, e.value ) );
+            connectedCallback()
+            {   const x = createNS( DCE_NS_URL,'datadom' );
+                injectData( x, 'payload'    , this.childNodes, assureSlot );
+                injectData( x, 'attributes' , this.attributes, e => create( e.nodeName, e.value ) );
                 injectData( x, 'dataset', Object.keys( this.dataset ), k => create( k, this.dataset[ k ] ) );
                 const sliceRoot = injectData( x, 'slice', sliceNames, k => create( k, '' ) );
                 this.xml = x;
                 const slices = {};
 
-
                 const sliceEvents=[];
                 const applySlices = ()=>
                 {   const processed = {}
@@ -147,6 +258,10 @@ CustomElement extends HTMLElement
 
                 this.onSlice = ev=>
                 {   ev.stopPropagation?.();
+                    const s = attr( ev.target, 'slice')
+                    if( deepEqual( ev.detail, [...sliceRoot.children].find( e=>e.localName === s )?.data ) )
+                        return
+
                     sliceEvents.push(ev);
                     if( !timeoutID )
                         timeoutID = setTimeout(()=>
@@ -156,41 +271,39 @@ CustomElement extends HTMLElement
                 };
                 const transform = ()=>
                 {
-                    const f = p.transformToFragment( x, document );
+                    const ff = xp.map( p => p.transformToFragment(x, document) );
                     this.innerHTML = '';
-                    [ ...f.childNodes ].forEach( e => this.appendChild( e ) );
+                    ff.map( f =>
+                    {   [ ...f.childNodes ].forEach( e => this.append( e ) );
 
-                    for( let el of this.querySelectorAll('[slice]') )
-                        if( 'function' === typeof el.sliceInit )
-                        {   const s = attr(el,'slice');
-                            slices[s] = el.sliceInit( slices[s] );
-                        }
+                        forEach$( this,'[slice]', el =>
+                        {   if( 'function' === typeof el.sliceInit )
+                            {   const s = attr( el,'slice' );
+                                slices[s] = el.sliceInit( slices[s] );
+                            }
+                        })
+                    })
                 };
                 transform();
                 applySlices();
             }
-            get dce(){ return dce;}
-        } );
+            get dce(){ return dce }
+        }
+        if(tag)
+            window.customElements.define( tag, DceElement);
+        else
+        {   const t = 'dce-'+crypto.randomUUID()
+            window.customElements.define( t, DceElement);
+            const el = document.createElement(t);
+            this.getAttributeNames().forEach(a=>el.setAttribute(a,this.getAttribute(a)));
+            el.append(...this.childNodes)
+            this.append(el);
+        }
     }
     get templateNode(){ return this.firstElementChild?.tagName === 'TEMPLATE'? this.firstElementChild.content : this }
-    get dce(){ return this;}
-    get xsltString()
-    {
-        return (
-`<xsl:stylesheet version="1.0"
-    xmlns:xsl="${ XSL_NS_URL }">
-  <xsl:output method="html" />
+    get dce(){ return this }
 
-  <xsl:template match="/">
-    <xsl:apply-templates select="//attributes"/>
-  </xsl:template>
-  <xsl:template match="attributes">
-    ${ bodyXml( this ) }
-  </xsl:template>
-
-</xsl:stylesheet>` );
-    }
-    get xslt(){ return xml2dom( this.xsltString ); }
+    get xslt(){ return xml2dom( this.xsltString ) }
 }
 
 window.customElements.define( 'custom-element', CustomElement );

package/demo/a.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="demo/wc-square.svg" />
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "demo/demo.css";
+        svg{ max-width: 2rem;}
+    </style>
+</head>
+<body>
+
+<template id="template1">
+    <slot> Hello </slot> World!
+</template>
+
+ <custom-element src="html-template.html#dwc-logo" >
+            <template><i>loading from HTML templates file ...</i></template>
+        </custom-element>
+
+</body>
+</html>

package/demo/confused.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
+  <defs>
+    <linearGradient id="d">
+      <stop offset="0"/>
+      <stop offset=".5"/>
+      <stop offset=".80000001" stop-opacity=".46666667"/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#fb0"/>
+      <stop offset=".5" stop-color="#e29d00"/>
+      <stop offset="1" stop-color="#fb0"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0"/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#ffc"/>
+      <stop offset=".5" stop-color="#fff965"/>
+      <stop offset="1" stop-color="#fc3"/>
+    </linearGradient>
+    <linearGradient xlink:href="#a" id="i" x1="8.0350637" x2="42.788235" y1="32.372219" y2="32.372219" gradientUnits="userSpaceOnUse" spreadMethod="pad"/>
+    <radialGradient xlink:href="#b" id="f" cx="17.986637" cy="16.545853" r="23.978155" fx="17.986637" fy="16.545853" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#c" id="e" cx="53.309223" cy="94.956306" r="63.252911" fx="53.309223" fy="94.956306" gradientTransform="matrix(1 0 0 .34935 0 61.7838)" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#d" id="g" cx="18.71347" cy="21.759708" r="1.8644418" fx="18.71347" fy="21.759708" gradientTransform="matrix(1 0 0 1.77778 0 -16.92422)" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path fill="url(#e)" d="M116.56213 94.956306a63.252911 22.097088 0 1 1-126.5058174 0 63.252911 22.097088 0 1 1 126.5058174 0z" opacity=".53200001" transform="matrix(.3162 0 0 .33941 6.936944 8.132618)"/>
+  <path fill="url(#f)" stroke="#fb0" stroke-width="1.43869453" d="M47.094418 23.83131a23.478155 23.478155 0 1 1-46.9563107 0 23.478155 23.478155 0 1 1 46.9563107 0z" transform="translate(4.30185 4.122792) scale(.83409)"/>
+  <path id="h" fill="#fff" fill-opacity="1" fill-rule="nonzero" stroke="#fc0" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M21.682767 18.5142a3.9360437 6.9743929 0 1 1-7.872088 0 3.9360437 6.9743929 0 1 1 7.872088 0z" opacity="1" transform="matrix(1.01507 0 0 1.00354 -.0090285 .916405)"/>
+  <path id="j" fill="url(#g)" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M20.577912 21.759708a1.8644418 3.314563 0 1 1-3.728883 0 1.8644418 3.314563 0 1 1 3.728883 0z" opacity="1" transform="translate(-.138107 .535104)"/>
+  <use xlink:href="#h" width="48" height="48" transform="translate(12.50001 -4.4e-7)"/>
+  <path fill="none" stroke="url(#i)" stroke-linecap="round" stroke-width="1.97319973" d="M9.0216636 35.899178c4.7689724-7.457767 10.9544424-9.489956 17.3095664-3.728884 5.404329 4.899155 11.190398 4.350365 15.470406-.656007"/>
+  <path fill="none" stroke="#e2ac00" stroke-linecap="round" stroke-width="1.17813516" d="M15.504748 34.21319c3.012147-3.243177 6.693658.87012 6.693658.87012" opacity=".8"/>
+  <use xlink:href="#j" width="48" height="48" transform="translate(10.78418 -5)"/>
+</svg>

package/demo/demo.css

@@ -5,8 +5,10 @@ html
 body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
 body>*{flex: auto;}
 nav{ flex-direction: column;}
+custom-element+*,
+custom-element:not([tag]),
 dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile,
-dce-1,dce-2,dce-3,dce-4
+dce-1,dce-2,dce-3,dce-4,dce-internal,dce-hash
 { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block; flex:1; }
 dd{ padding: 1rem;}
 p{ margin: 0;}

package/demo/embed-1.html

@@ -0,0 +1,3 @@
+<h4>embed-1.html</h4>
+<custom-element tag="dce-embed-1" hidden>🖖</custom-element>
+<dce-embed-1>?</dce-embed-1>

package/demo/external-template.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>http-request Declarative Custom Element implementation demo</title>
+        <link rel="icon" href="./wc-square.svg" />
+
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+
+        button
+        {   display: inline-flex; flex-direction: column; align-items: center; flex: auto;
+            box-shadow: inset silver 0 0 1rem; min-width: 12rem; padding: 1rem;
+            color: coral; text-shadow: 1px 1px silver; font-weight: bolder;
+        }
+        button img{ max-height: 10vw; min-height: 4rem;}
+        table{ min-width: 16rem; }
+        td{ border-bottom: 1px solid silver; }
+        tfoot td{ border-bottom: none; }
+        td,th{text-align: right; }
+        caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
+        code{ text-align: right; min-width: 3rem;}
+        svg{ max-height: 3rem;}
+    </style>
+</head>
+<body>
+
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+    <h3>Loading DCE template by SRC attribute</h3>
+</nav>
+
+<html-demo-element legend="1. reference the template in page DOM"
+                   description="should render hand wave with '👋 World!' and 'Hello World!'">
+    <template>
+<template id="template1">
+    <slot> Hello </slot> World!
+</template>
+
+<custom-element tag="dce-internal" src="#template1"></custom-element>
+<!-- no need for loading fallback as the template exists -->
+
+<dce-internal>👋</dce-internal>
+<dce-internal></dce-internal>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="2. without TAG, inline instantiation"
+                   description="hash value in SRC references template by ID. Should output 'construction' 2 times">
+    <template>
+<template id="template2">
+    🏗️ construction
+</template>
+
+<custom-element src="#template2"></custom-element>
+<custom-element src="#template2"></custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. external SVG file" >
+    <template>
+            <custom-element tag="dce-external" src="confused.svg" >
+                <template><i>loading from SVG ...</i></template>
+            </custom-element>
+            <dce-external></dce-external>
+            <custom-element src="confused.svg" >
+                <i>inline DCE loading from SVG ...</i>
+            </custom-element>
+            <custom-element src="no.svg" >
+                <i>fallback for missing image</i>
+            </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="4. external XSLT file" >
+    <template>
+            <custom-element tag="dce-external-4" src="tree.xsl" >
+                <template><i>loading from XSLT ...</i></template>
+            </custom-element>
+            <dce-external-4 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-4>
+            <custom-element src="tree.xsl"  data-smile="👼" data-basket="🍒">
+                <i>inline DCE loading from XSLT ...</i>
+            </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="5. external HTML template" description="Should render 👋👌, svg">
+    <template>
+            <custom-element tag="dce-external-5" src="html-template.html" >
+                <template><i>loading from HTML file ...</i></template>
+            </custom-element>
+            <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
+            <custom-element src="html-template.html"  data-smile="👼" data-basket="🍒">
+                <i>inline DCE loading from HTML file ...</i>
+            </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg, 👌">
+    <a href="html-template.html">html-template.html</a>
+    <template>
+        <custom-element src="html-template.html#wave" >
+            <template><i>loading from HTML templates file ...</i></template>
+        </custom-element>
+        <custom-element src="html-template.html#dwc-logo" >
+            <template><i>loading from HTML templates file ...</i></template>
+        </custom-element>
+        <custom-element src="html-template.html#ok" >
+            <template><i>loading from HTML templates file ...</i></template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="7. XSLT by ID within external file" description="Should render tree, and fallback">
+    <a href="html-template.html">html-template.html</a>
+    <template>
+        <custom-element src="html-template.xhtml#embedded-xsl" >
+            <template>whole XSLT is  embedded into HTML body</template>
+        </custom-element>
+         <custom-element src="html-template.html#none" >
+            <template><i>element with id=none is missing in template</i></template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="8. external file with embedding of another external DCE"
+                   description="Should render Vulcan Salute 🖖"
+>
+    <template>
+            <custom-element src="embed-1.html" >
+                loading from embed-1.html ...
+            </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="embed-1.html external file " src="embed-1.html">
+</html-demo-element>
+<!--
+<html-demo-element legend="9. deep external files, complex rendering" >
+    <template>
+            <custom-element src="../index.html#shared-template" hidden>
+                loading by hash from ../index.html#shared-template ...
+            </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="9. own import maps" >
+    <template>
+            <custom-element  src="../index.html#shared-template" hidden>
+                loading by hash from ../index.html#shared-template ...
+            </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="10. deep external files with own import maps" >
+    <template>
+            <custom-element src="../index.html#shared-template" hidden>
+                loading by hash from ../index.html#shared-template ...
+            </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="11. local template as a 'loading...' or fallback for remote, error handling" >
+    <template>
+            <custom-element src="../index.html#shared-template" hidden>
+                loading by hash from ../index.html#shared-template ...
+            </custom-element>
+    </template>
+</html-demo-element>
+
+-->
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/demo/html-template.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<head>
+    <meta charset="UTF-8">
+    <title>template based on HTML file</title>
+</head>
+<body>
+  <b id="wave">👋</b>
+  <b id="ok">👌</b>
+  <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>
+
+</body>
+</html>

package/demo/html-template.xhtml

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<head>
+    <meta charset="UTF-8"/>
+    <title>template based on HTML file</title>
+</head>
+<body>
+  <b id="wave">👋</b>
+  <b id="ok">👌</b>
+  <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>
+  <xsl:stylesheet
+        id="embedded-xsl"
+        version="1.0"
+        xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <xsl:output
+        method="html"
+        omit-xml-declaration="yes"
+        standalone="yes"
+        indent="yes"
+    />
+
+    <xsl:template match="/">
+        <xsl:apply-templates select="*"/>
+    </xsl:template>
+    <xsl:template match="*">
+        <details style="padding:0 1rem" open="open">
+            <summary>
+                <b style="color:green"><xsl:value-of select="name()"/></b>
+                <xsl:apply-templates select="@*"/>
+            </summary>
+            <xsl:value-of select="./text()"/>
+            <xsl:apply-templates select="*"/>
+        </details>
+    </xsl:template>
+    <xsl:template match="@*">
+        <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
+    </xsl:template>
+    <xsl:template match="text()">
+            <p>
+                <xsl:value-of select="."/>
+            </p>
+    </xsl:template>
+</xsl:stylesheet>
+</body>
+</html>