@epa-wg/custom-element 0.0.10 → 0.0.12

package/custom-element.js

@@ -1,46 +1,37 @@
-const XML_DECLARATION = '<?xml version="1.0" encoding="UTF-8"?>'
-,     XSL_NS_URL      = 'http://www.w3.org/1999/XSL/Transform';
+const XSL_NS_URL  = 'http://www.w3.org/1999/XSL/Transform'
+,     HTML_NS_URL = 'http://www.w3.org/1999/xhtml'
+,     EXSL_NS_URL = 'http://exslt.org/common'
+,     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 ));
+const attr = (el, attr)=> el.getAttribute?.(attr)
+,   isText = e => e.nodeType === 3
+,   create = ( tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElement( tag ))
+,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
+,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ))
+,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
+,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) );
 
     function
-xml2dom( xmlString )
+ASSERT(x)
 {
-    return new DOMParser().parseFromString( XML_DECLARATION + xmlString, "application/xml" )
+    // if(!x)
+    //     debugger
 }
-
     function
-bodyXml( dce )
+xml2dom( xmlString )
 {
-    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( '<' ) ) );
+    return new DOMParser().parseFromString( xmlString, "application/xml" )
 }
-
     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 create = ( tag ) => root.ownerDocument.createElement( tag );
     const inject = ( tag, parent, s ) =>
-    {
-        parent.append( s = create( tag ) );
+    {   parent.append( s = create( tag ) );
         return s;
     };
     const l = inject( sectionName, root );
@@ -90,45 +81,300 @@ Json2Xml( o, tag )
         ret.push("/>");
     return ret.join('\n');
 }
+    export function
+tagUid( node )
+{   // {} to xsl:value-of
+    forEach$(node,'*',d => [...d.childNodes].filter( e=>e.nodeType === 3 ).forEach( e=>
+    {   if( e.parentNode.localName === 'style' )
+            return;
+        const m = e.data.matchAll( /{([^}]*)}/g );
+        if(m)
+        {   let l = 0
+            , txt = t => createText(e,t||'')
+            ,  tt = [];
+            [...m].forEach(t=>
+            {   if( t.index > l )
+                    tt.push( txt( t.input.substring( l, t.index ) ))
+                const v = e.ownerDocument.createElement('xsl:value-of');
+                v.setAttribute('select', t[1] );
+                tt.push(v);
+                l = t.index+t[0].length;
+            })
+            if( l < e.data.length)
+                tt.push( txt( e.data.substring(l,e.data.length) ));
+            if( tt.length )
+            {   for( let t of tt )
+                    d.insertBefore(t,e);
+                d.removeChild(e);
+            }
+        }
+    }));
 
-    function
+    if( 'all' in node ) {
+        let i= 1;
+        for( let e of node.all )
+            e.setAttribute && !e.tagName.startsWith('xsl:') && e.setAttribute('data-dce-id', '' + i++)
+    }
+    return node
+}
+    export function
+createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
+{
+    if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
+        return tagUid(templateNode)
+    const sanitizeXsl = xml2dom(`<xsl:stylesheet version="1.0" xmlns:xsl="${ XSL_NS_URL }" xmlns:xhtml="${ HTML_NS_URL }" xmlns:exsl="${EXSL_NS_URL}" exclude-result-prefixes="exsl" >   
+        <xsl:output method="xml" />
+        <xsl:template match="/"><dce-root><xsl:apply-templates select="*"/></dce-root></xsl:template>
+        <xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
+        <xsl:template match="*"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
+        <xsl:template match="*[name()='svg']|*[name()='math']"><xsl:apply-templates mode="sanitize" select="."/></xsl:template>
+        <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]"><xsl:copy><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"/></xsl:copy></xsl:template>
+        <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"/></xsl:element></xsl:template>
+        <xsl:template mode="sanitize" match="*|@*"><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></xsl:template>
+        <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
+        <xsl:template mode="sanitize" match="text()"><dce-text><xsl:copy/></dce-text></xsl:template>
+        <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']"><dce-text><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></dce-text></xsl:template>
+        <xsl:template mode="sanitize" match="xhtml:*"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:element></xsl:template>
+    </xsl:stylesheet>`)
+    const sanitizeProcessor = new XSLTProcessor()
+    ,   tc = (n =>
+        {
+            forEach$(n,'script', s=> s.remove() );
+            const e = n.firstElementChild?.content || n.content
+            , asXmlNode = r => xslHtmlNs(xml2dom( '<xhtml/>' ).importNode(r, true));
+            if( e )
+            {   const t = create('div');
+                [ ...e.childNodes ].map( c => t.append(c.cloneNode(true)) )
+                return asXmlNode(t)
+            }
+            return  asXmlNode(n.documentElement || n.body || n)
+        })(templateNode)
+    ,   xslDom = xml2dom(
+        `<xsl:stylesheet version="1.0"
+        xmlns:xsl="${ XSL_NS_URL }"
+        xmlns:dce="urn:schemas-epa-wg:dce"
+        xmlns:exsl="http://exslt.org/common"
+        exclude-result-prefixes="exsl"
+    >
+    <xsl:template mode="payload"  match="attributes"></xsl:template>
+    <xsl:template match="/">
+        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    </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:variable name="js-injected-body">
+        <xsl:call-template name="slot" >
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template>
+    </xsl:variable>
+</xsl:stylesheet>`
+        );
+
+    sanitizeProcessor.importStylesheet( sanitizeXsl );
+
+    const fr = sanitizeProcessor.transformToFragment(tc, document)
+    ,   $ = (e,css) => e.querySelector(css)
+    ,   payload = $( xslDom, 'template[mode="payload"]');
+    if( !fr )
+        return console.error("transformation error",{ xml:tc.outerHTML, xsl: xmlString( sanitizeXsl ) });
+
+    for( const c of fr.childNodes )
+        payload.append(xslDom.importNode(c,true))
+
+    const embeddedTemplates = [...payload.querySelectorAll('template')];
+    embeddedTemplates.forEach(t=>payload.ownerDocument.documentElement.append(t));
+
+    const   slotCall = $(xslDom,'call-template[name="slot"]')
+    ,       slot2xsl = s =>
+    {   const v = slotCall.cloneNode(true)
+        ,  name = attr(s,'name') || '';
+        name && v.firstElementChild.setAttribute('select',`'${ name }'`)
+        for( let c of s.childNodes)
+            v.lastElementChild.append(c)
+        return v
+    }
+
+    forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
+
+    return tagUid(xslDom)
+}
+    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' ;
-
+    const createXmlNode = ( tag, t = '' ) => ( e => ((e.append( createText(x, t||''))),e) )(x.ownerDocument.createElement( tag ))
     const el = isString
-        ? create(s, data)
+        ? createXmlNode(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 )
+        [...el.querySelectorAll(css)].forEach(cb)
+}
+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 function mergeAttr( from, to )
+{   if( isText(from) )
+    {
+        if( !isText(to) ){ debugger }
+        return
+    }
+    for( let a of from.attributes)
+        a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
+}
+export function assureUnique(n, id=0)
+{
+    const m = {}
+    for( const e of n.childNodes )
+    {
+        const a = attr(e,'data-dce-id') || e.dceId || 0;
+        if( !m[a] )
+        {   if( !a )
+            {   m[a] = e.dceId = ++id;
+                if( e.setAttribute )
+                    e.setAttribute('data-dce-id', e.dceId )
+            }else
+                m[a] = 1;
+        }else
+        {   const v = e.dceId = a + '-' + m[a]++;
+            if( e.setAttribute )
+                e.setAttribute('data-dce-id', v )
+        }
+        e.childNodes.length && assureUnique(e)
+    }
+}
+export function merge( parent, fromArr )
+{
+    const id2old = {};
+    for( let c of parent.childNodes)
+    {   ASSERT( !id2old[c.dceId] );
+        if( isText(c) )
+        {   ASSERT( c.data.trim() );
+            id2old[c.dceId || 0] = c;
+        } else
+            id2old[attr(c, 'data-dce-id') || 0] = c;
+    }
+    for( let e of [...fromArr] )
+    {
+        const o = id2old[ attr(e, 'data-dce-id') || e.dceId ];
+        if( o )
+        {   if( isText(e) )
+            {   if( o.nodeValue !== e.nodeValue )
+                    o.nodeValue = e.nodeValue;
+            }else
+            {   mergeAttr(o,e)
+                if( o.childNodes.length || e.childNodes.length )
+                    merge(o, e.childNodes)
+            }
+        }else
+            parent.append( e )
+    }
+}
+
     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: ()=>templateDocs.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 ) );
-                injectData( x, 'dataset', Object.keys( this.dataset ), k => create( k, this.dataset[ k ] ) );
-                const sliceRoot = injectData( x, 'slice', sliceNames, k => create( k, '' ) );
+            connectedCallback()
+            {   const x = xml2dom( '<datadom/>' ).documentElement;
+                const createXmlNode = ( tag, t = '' ) => ( e =>
+                {   if( t )
+                        e.append( createText( x, t ))
+                    return e;
+                })(x.ownerDocument.createElement( tag ))
+                injectData( x, 'payload'    , this.childNodes, assureSlot );
+                this.innerHTML='';
+                injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
+                injectData( x, 'dataset', Object.keys( this.dataset ), k => createXmlNode( k, this.dataset[ k ] ) );
+                const sliceRoot = injectData( x, 'slice', sliceNames, k => createXmlNode( k, '' ) );
                 this.xml = x;
-                const slices = {};
-
 
                 const sliceEvents=[];
                 const applySlices = ()=>
@@ -138,7 +384,7 @@ CustomElement extends HTMLElement
                     {   const s = attr( ev.target, 'slice');
                         if( processed[s] )
                             continue;
-                        injectSlice( sliceRoot, s, ev.detail );
+                        injectSlice( sliceRoot, s, 'object' === typeof ev.detail ? {...ev.detail}: ev.detail );
                         processed[s] = ev;
                     }
                     Object.keys(processed).length !== 0 && transform();
@@ -147,6 +393,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 +406,50 @@ CustomElement extends HTMLElement
                 };
                 const transform = ()=>
                 {
-                    const f = p.transformToFragment( x, document );
-                    this.innerHTML = '';
-                    [ ...f.childNodes ].forEach( e => this.appendChild( e ) );
-
-                    for( let el of this.querySelectorAll('[slice]') )
-                        if( 'function' === typeof el.sliceInit )
-                        {   const s = attr(el,'slice');
-                            slices[s] = el.sliceInit( slices[s] );
+                    const ff = xp.map( (p,i) =>
+                    {   const f = p.transformToFragment(x, document)
+                        if( !f )
+                            console.error( "XSLT transformation error. xsl:\n", xmlString(templateDocs[i]), '\nxml:\n', xmlString(x) );
+                        return f
+                    });
+                    ff.map( f =>
+                    {   if( !f )
+                            return;
+                        assureUnique(f)
+                        merge( this, f.childNodes )
+                    })
+                    const changeCb = el=>this.onSlice({ detail: el[attr(el,'slice-prop') || 'value'], target: el })
+                    , hasInitValue = el => el.hasAttribute('slice-prop') || el.hasAttribute('value') || el.value;
+
+                    forEach$( this,'[slice]', el =>
+                    {   if( !el.dceInitialized )
+                        {   el.dceInitialized = 1;
+                            el.addEventListener( attr(el,'slice-update')|| 'change', ()=>changeCb(el) )
+                            if( hasInitValue(el) )
+                                changeCb(el)
                         }
+                    })
                 };
                 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" />
-
-  <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 dce(){ return this }
+
+    get xslt(){ return xml2dom( this.xsltString ) }
 }
 
 window.customElements.define( 'custom-element', CustomElement );

package/demo/a.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+      xmlns:html="http://www.w3.org/1999/xhtml">
+<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="./wc-square.svg" />
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+
+    <style>
+        @import "./demo.css";
+
+        button{ background: forestgreen; }
+        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; }
+    </style>
+</head>
+<body>
+
+<custom-element >
+    <local-storage key="basket" slice="basket"></local-storage>
+    <html:table>
+        <xsl:for-each select="//slice/basket/@*">
+            <html:tr>
+                <html:th> {name()} </html:th>
+                <html:td> {.}      </html:td>
+            </html:tr>
+        </xsl:for-each>
+    </html:table>
+    count:<xsl:value-of select="count(//slice/basket/@*)"/>
+</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;}