@epa-wg/custom-element-dist 0.0.27 → 0.0.28

package/public/demo/ss.html

@@ -1,57 +1,24 @@
-<dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1"><http-request xmlns="" url="/reflect" slice="page" data-dce-id="2"></http-request><p xmlns="" data-dce-id="3">Pokemon Count: 6</p>
-<ul xmlns="" data-dce-id="6">
-<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">request</dce-text></var><div data-dce-id="9">
-<var data-dce-id="10">@url</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-url" data-dce-id="12">/reflect</code>
-</div>
-<div data-dce-id="9-1">
-<var data-dce-id="10">@data-dce-id</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-data-dce-id" data-dce-id="12">2</code>
-</div>
-</ul>
-<ul xmlns="" data-dce-id="6-1">
-<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">response</dce-text></var><div data-dce-id="9">
-<var data-dce-id="10">@ok</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-ok" data-dce-id="12">true</code>
-</div>
-<div data-dce-id="9-1">
-<var data-dce-id="10">@status</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-status" data-dce-id="12">200</code>
-</div>
-<div data-dce-id="9-2">
-<var data-dce-id="10">@statusText</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-statusText" data-dce-id="12">OK</code>
-</div>
-<div data-dce-id="9-3">
-<var data-dce-id="10">@type</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-type" data-dce-id="12">basic</code>
-</div>
-<div data-dce-id="9-4">
-<var data-dce-id="10">@url</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-url" data-dce-id="12">http://localhost:5173/reflect</code>
-</div>
-<div data-dce-id="9-5">
-<var data-dce-id="10">@redirected</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-redirected" data-dce-id="12">false</code>
-</div>
-</ul><button xmlns="" data-dce-id="5">bulbasaur</button><button xmlns="" data-dce-id="5-1">ivysaur</button><button xmlns="" data-dce-id="5-2">venusaur</button><button xmlns="" data-dce-id="5-3">charmander</button><button xmlns="" data-dce-id="5-4">charmeleon</button><button xmlns="" data-dce-id="5-5">charizard</button>
-<ul xmlns="" data-dce-id="6-2">
-<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">data</dce-text></var><div data-dce-id="9">
-<var data-dce-id="10">@count</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-count" data-dce-id="12">1279</code>
-</div>
-<div data-dce-id="9-1">
-<var data-dce-id="10">@next</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-next" data-dce-id="12">https://pokeapi.co/api/v2/pokemon?offset=6&amp;limit=6</code>
-</div>
-</ul></dce-root>
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" label="Number" name="" placeholder="Enter the numeric value" type="text" value=""
+          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><pre data-dce-id="2" xmlns="">                //focused
+                //suggest
+                //selected
+                $selected-value </pre>
+    <label data-dce-id="3">
+        <dce-text data-dce-id="4">Number</dce-text>
+        <input data-dce-id="5" name="" placeholder="Enter the numeric value" type="text" value="">
+        <slice data-dce-id="6" name="focused" slice-event="focus" slice-value="1"/>
+        <slice data-dce-id="7" name="selected" slice-event="input"/>
+        </input></label>
+    <fieldset data-dce-id="8" form="cem-autocomplete-form" xmlns=""><label data-dce-id="9" value="one"><input
+            data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input" type="radio" value="one"/>
+        <dce-text data-dce-id="11">One</dce-text>
+    </label><label data-dce-id="9" value="two"><input data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input"
+                                                      type="radio" value="two"/>
+        <dce-text data-dce-id="11">Two</dce-text>
+    </label><label data-dce-id="9" value="three"><input data-dce-id="10" name="cem-autocomplete" slice="suggest"
+                                                        slice-event="input" type="radio" value="three"/>
+        <dce-text data-dce-id="11">Three</dce-text>
+    </label></fieldset>
+</dce-root>

package/public/demo/z.html

@@ -1,33 +1,33 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>DOM merge - Declarative Custom Element implementation demo</title>
-    <link rel="icon" href="./wc-square.svg"/>
-    <script type="importmap">
-        {
-          "imports": {
-            "@epa-wg/custom-element/": "../",
-            "@epa-wg/custom-element-dist/": "../"
-          }
-        }
-    </script>
-    <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../location-element.js"></script>
-    <script type="module" src="../custom-element.js"></script>
-    <style>
-        @import "./demo.css";
-        dt{ font-weight: bold}
-        dd{ padding: 0;}
-        h1,h3{ margin: 0;}
-        nav{ gap:0; }
-    </style>
-</head>
-<body>
-
-  <custom-element src="./html-template.html#dwc-logo">
-            <template><i>loading SVG from templates file ...</i></template>
-        </custom-element>
-
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>DOM merge - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/custom-element/": "../",
+            "@epa-wg/custom-element-dist/": "../"
+          }
+        }
+    </script>
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        dt{ font-weight: bold}
+        dd{ padding: 0;}
+        h1,h3{ margin: 0;}
+        nav{ gap:0; }
+    </style>
+</head>
+<body>
+
+  <custom-element src="./html-template.html#dwc-logo">
+            <template><i>loading SVG from templates file ...</i></template>
+        </custom-element>
+
+</body>
+</html>

package/public/demo/z.xml

@@ -1,60 +1,60 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<dce-root data-dce-id="1" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-    <location-element slice="window-url" data-dce-id="2"/>
-    <table data-dce-id="3">
-        <tr data-dce-id="4">
-            <th data-dce-id="5">
-                <u data-dce-id="6">URL properties</u>
-            </th>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">href</th>
-            <td data-dce-id="9">http://localhost:63342/custom-element/demo/a.html?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">origin</th>
-            <td data-dce-id="9">http://localhost:63342</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">protocol</th>
-            <td data-dce-id="9">http:</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">host</th>
-            <td data-dce-id="9">localhost:63342</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">hostname</th>
-            <td data-dce-id="9">localhost</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">port</th>
-            <td data-dce-id="9">63342</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">pathname</th>
-            <td data-dce-id="9">/custom-element/demo/a.html</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">search</th>
-            <td data-dce-id="9">?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
-        </tr>
-        <tr data-dce-id="7">
-            <th data-dce-id="8">hash</th>
-            <td data-dce-id="9"/>
-        </tr>
-        <tr data-dce-id="10">
-            <th data-dce-id="11">
-                <u data-dce-id="12">URL parameters</u>
-            </th>
-        </tr>
-        <tr data-dce-id="13">
-            <th data-dce-id="14">_ijt</th>
-            <td data-dce-id="15">qca6trk5kne6eo4s4tomq4egmm</td>
-        </tr>
-        <tr data-dce-id="13">
-            <th data-dce-id="14">_ij_reload</th>
-            <td data-dce-id="15">RELOAD_ON_SAVE</td>
-        </tr>
-    </table>
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+    <location-element slice="window-url" data-dce-id="2"/>
+    <table data-dce-id="3">
+        <tr data-dce-id="4">
+            <th data-dce-id="5">
+                <u data-dce-id="6">URL properties</u>
+            </th>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">href</th>
+            <td data-dce-id="9">http://localhost:63342/custom-element/demo/a.html?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">origin</th>
+            <td data-dce-id="9">http://localhost:63342</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">protocol</th>
+            <td data-dce-id="9">http:</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">host</th>
+            <td data-dce-id="9">localhost:63342</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">hostname</th>
+            <td data-dce-id="9">localhost</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">port</th>
+            <td data-dce-id="9">63342</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">pathname</th>
+            <td data-dce-id="9">/custom-element/demo/a.html</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">search</th>
+            <td data-dce-id="9">?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">hash</th>
+            <td data-dce-id="9"/>
+        </tr>
+        <tr data-dce-id="10">
+            <th data-dce-id="11">
+                <u data-dce-id="12">URL parameters</u>
+            </th>
+        </tr>
+        <tr data-dce-id="13">
+            <th data-dce-id="14">_ijt</th>
+            <td data-dce-id="15">qca6trk5kne6eo4s4tomq4egmm</td>
+        </tr>
+        <tr data-dce-id="13">
+            <th data-dce-id="14">_ij_reload</th>
+            <td data-dce-id="15">RELOAD_ON_SAVE</td>
+        </tr>
+    </table>
 </dce-root>

package/public/demo/z1.html

@@ -1,34 +1,34 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>DOM merge - Declarative Custom Element implementation demo</title>
-    <link rel="icon" href="./wc-square.svg"/>
-    <script type="importmap">
-        {
-          "imports": {
-            "@epa-wg/custom-element/": "../",
-            "@epa-wg/custom-element-dist/": "../"
-          }
-        }
-    </script>
-    <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../location-element.js"></script>
-    <script type="module" src="../custom-element.js"></script>
-    <style>
-        @import "./demo.css";
-        dt{ font-weight: bold}
-        dd{ padding: 0;}
-        h1,h3{ margin: 0;}
-        nav{ gap:0; }
-    </style>
-</head>
-<body>
-<button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.27/storybook-static/index.html`">set in page URL</button>
-
-<custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version"
-                package-name="@epa-wg/custom-element-dist"
-                ></custom-element>
-
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>DOM merge - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/custom-element/": "../",
+            "@epa-wg/custom-element-dist/": "../"
+          }
+        }
+    </script>
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        dt{ font-weight: bold}
+        dd{ padding: 0;}
+        h1,h3{ margin: 0;}
+        nav{ gap:0; }
+    </style>
+</head>
+<body>
+<button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.27/storybook-static/index.html`">set in page URL</button>
+
+<custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version"
+                package-name="@epa-wg/custom-element-dist"
+                ></custom-element>
+
+</body>
+</html>

package/src/custom-element/custom-element.js

@@ -72,6 +72,12 @@ assureSlot( e )
     }
     return e;
 }
+    function
+keepAttributes(e, aNames)
+    {   e.getAttributeNames().forEach( n=> aNames.includes(n) || e.removeAttribute(n) ); }
+
+    export const
+sanitizeBlankText = payload=> [...payload].filter(e=>!(e.nodeType===3 && e.data.trim() ==='' ));
 
     export function
 obj2node( o, tag, doc )
@@ -181,17 +187,26 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         </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:copy>
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:copy>
     </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:template mode="sanitize" match="xhtml:input">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:element>
+        <xsl:for-each select="*">
+            <xsl:copy>
+                <xsl:attribute name="for" >^</xsl:attribute>
+                <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+            </xsl:copy>
+        </xsl:for-each>
+    </xsl:template>
 </xsl:stylesheet>`)
     const sanitizeProcessor = new XSLTProcessor()
     ,   tc = (n =>
@@ -273,9 +288,11 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     const params = [];
     [...fr.querySelectorAll('dce-root>attribute')].forEach( a=>
     {
+        keepAttributes(a,'namespace,name,select');
         const p = cloneAs(a,'xsl:param')
         ,  name = attr(a,'name');
         payload.append(p);
+        keepAttributes(p,'select,name');
         let select = attr(p,'select')?.split('??')
         if( !select)
         {   select = ['//'+name, `'${p.textContent}'`];
@@ -283,8 +300,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
             p.setAttribute('name',name);
         }
         let val;
-        if( select?.length>1 ){
-            p.removeAttribute('select');
+        if( select?.length>1 )
+        {   p.removeAttribute('select');
             const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
             emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
             emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
@@ -317,7 +334,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         for( let c of s.childNodes)
             v.lastElementChild.append(c)
         return v
-    }
+    };
 
     forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
 
@@ -466,7 +483,8 @@ const loadTemplateRoots = async ( src, dce )=>
         if( hash )
         {   const ret = dom.querySelectorAll('#'+hash);
             if( ret.length )
-                return [...ret]
+                return [...ret];
+            console.error('template not found',src+'#'+hash);
             return [dce]
         }
         return [dom]
@@ -609,6 +627,8 @@ CustomElement extends HTMLElement
     static observedAttributes = ['src','tag','hidden'];
     async connectedCallback()
     {
+        if(this.firstElementChild && this.firstElementChild.localName !== 'template')
+            console.warn('custom-element used without template wrapping content\n', this.outerHTML);
         const templateRoots = await loadTemplateRoots( attr( this, 'src' ), this )
         ,               tag = attr( this, 'tag' )
         ,           tagName = tag ? tag : 'dce-'+crypto.randomUUID();
@@ -644,16 +664,16 @@ CustomElement extends HTMLElement
             static get observedAttributes(){ return declaredAttributes.map( a=>attr(a,'name')); }
             #inTransform = 0;
             connectedCallback()
-            {   let payload = this.childNodes;
+            {   let payload = sanitizeBlankText(this.childNodes);
                 if( this.firstElementChild?.tagName === 'TEMPLATE' )
                 {
                     if( this.firstElementChild !== this.lastElementChild )
                         { console.error('payload should have TEMPLATE as only child', this.outerHTML ) }
                     const t = this.firstElementChild;
                     t.remove();
-                    payload = t.content.childNodes;
+                    payload = sanitizeBlankText(t.content.childNodes);
 
-                    for( const n of [...t.content.childNodes] )
+                    for( const n of payload )
                         if( n.localName === 'style' ){
                             const id = assureUID(this,'data-dce-style')
                             n.innerHTML= `${tagName}[data-dce-style="${id}"]{${n.innerHTML}}`;
@@ -728,18 +748,39 @@ CustomElement extends HTMLElement
                         }
                     })
 
+                    function getSliceTarget(el)
+                    {   let r = el;
+                        if( el.localName === 'slice')
+                        {   const ref= attr(el,'for');
+                            if( !ref )
+                                r = el.parentElement;
+                            if( '^' === ref )
+                            {   do r = r.previousElementSibling;
+                                while( r.localName === 'slice' )
+                            } else
+                                r = this.querySelector(ref)
+
+                            if( !r )
+                                return console.warn(`can not find selector in "slice for=${ref}" `, el.outerHTML);
+                            attr(el,'slice') || el.setAttribute('slice', attr(el,'name'))
+                        }
+                        return r;
+                    }
                     forEach$( this,'[slice],[slice-event]', el =>
-                    {   if( !el.dceInitialized )
+                    {   let evs = attr(el,'slice-event');
+                        const sVal = el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value;
+                        const tgt = getSliceTarget(el);
+                        if( !el.dceInitialized )
                         {   el.dceInitialized = 1;
-                            let evs = attr(el,'slice-event');
-                            if( el.hasAttribute('custom-validity') )
+                            if( tgt.hasAttribute('custom-validity') )
                                 evs += ' change submit';
 
                             [...new Set((evs || 'change') .split(' '))]
-                                .forEach( t=> (el.localName==='slice'? el.parentElement : el)
-                                    .addEventListener( t, ev=>
+                                .forEach( t=>
+                                    tgt.addEventListener( t, ev=>
                                     {   ev.sliceElement = el;
                                         ev.sliceEventSource = ev.currentTarget || ev.target;
+                                        ev.sliceProcessed = 0;
                                         const slices = event2slice( sliceRoot, attr( ev.sliceElement, 'slice'), ev, this );
 
                                         forEach$(this,'[custom-validity]',el =>
@@ -752,7 +793,7 @@ CustomElement extends HTMLElement
                                             }catch(err)
                                                 { console.error(err, 'xPath', x) }
                                         })
-                                        const x = attr(el,'custom-validity')
+                                        const x = attr(tgt,'custom-validity')
                                         ,     v = x && xPath( x, attrsRoot )
                                         ,   msg = v === true? '' : v;
 
@@ -778,8 +819,8 @@ CustomElement extends HTMLElement
                                         this.onSlice(ev);
                                     } ));
                             if( !evs || evs.includes('init') )
-                            {   if( el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value )
-                                    this.onSlice({type:'init', target: el, sliceElement:el, sliceEventSource:el })
+                            {   if( sVal )
+                                    this.onSlice({type:'init', target: tgt, sliceElement:el, sliceEventSource:tgt })
                                 else
                                     el.value = sliceXPath( attr(el,'slice') )
                             }

package/src/custom-element/demo/a.svg

@@ -1,27 +1,27 @@
-<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-    <defs>
-
-    </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 id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <defs>
+
+    </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>

package/src/custom-element/demo/s.xml

@@ -1,3 +1,18 @@
-<body xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><h4>embed-1.html</h4>
-<custom-element><template>🖖</template></custom-element>
-</body>
+<?xml version="1.0" encoding="UTF-8"?>
+<datadom>
+    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="4" slot="">link 1</a>
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="5" slot="">link 2</a>
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="6" slot="">link 3</a>
+    </payload>
+    <attributes>
+        <xmlns/>
+        <justify>end</justify>
+        <data-dce-id>2</data-dce-id>
+        <direction>row</direction>
+    </attributes>
+    <dataset>
+        <dceId>2</dceId>
+    </dataset>
+    <slice/>
+</datadom>