@epa-wg/custom-element-dist 0.0.32 → 0.0.33

package/public/demo/s.xslt

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
                 xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
                 exclude-result-prefixes="exsl">
@@ -14,54 +13,79 @@
         <xsl:value-of select="."/>
     </xsl:template>
     <xsl:template mode="payload" match="attributes">
-        <xsl:param name="p1" select="/datadom/attributes/p1">default_P1</xsl:param>
-        <xsl:param name="p2" select="'always_p2'"/>
-        <xsl:param name="p3">
+        <xsl:param name="v">
             <xsl:choose>
-                <xsl:when test="string-length(//p3)>0 ">RRRR
-                    <xsl:value-of select="count(//p3)"/>
-                    +<xsl:value-of select="//p3 "/>=
+                <xsl:when test="//s[//s/event] ">
+                    <xsl:value-of select="//s[//s/event] "/>
                 </xsl:when>
-                <xsl:otherwise>OOO
-                    <xsl:value-of select=" 'def_P3' "/>
+                <xsl:when test=" //attributes/@v ">
+                    <xsl:value-of select=" //attributes/@v "/>
+                </xsl:when>
+                <xsl:otherwise>
+                    <xsl:value-of select=" 'def' "/>
                 </xsl:otherwise>
             </xsl:choose>
         </xsl:param>
         <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <xsl:attribute name="p1">default_P1</xsl:attribute>
-            <xsl:attribute name="p2">
-                <xsl:value-of select="'always_p2'"/>
-            </xsl:attribute>
-            <xsl:attribute name="p3">
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="has-input"
+                          select="count(//s/*) &gt; 0"/>
+            <xsl:attribute name="v">
                 <xsl:choose>
-                    <xsl:when test="//p3 ">
-                        <xsl:value-of select="//p3 "/>
+                    <xsl:when test="//s[//s/event] ">
+                        <xsl:value-of select="//s[//s/event] "/>
+                    </xsl:when>
+                    <xsl:when test=" //attributes/@v ">
+                        <xsl:value-of select=" //attributes/@v "/>
                     </xsl:when>
                     <xsl:otherwise>
-                        <xsl:value-of select=" 'def_P3' "/>
+                        <xsl:value-of select=" 'def' "/>
                     </xsl:otherwise>
                 </xsl:choose>
             </xsl:attribute>
             <dce-text xmlns="" data-dce-id="2">
-                p1:
+
+                //attributes/v='<xsl:value-of select="//attributes/v"/>'
             </dce-text>
-            <code xmlns="" data-testid="p1" data-dce-id="3">
-                <xsl:value-of select="$p1"/>
-            </code>
-            <br xmlns="" data-dce-id="4"/>
-            <dce-text xmlns="" data-dce-id="5">
-                p2:
+            <br xmlns="" data-dce-id="3"/>
+            <dce-text xmlns="" data-dce-id="4">
+                //attributes/@v='<xsl:value-of select="//attributes/@v"/>'
+            </dce-text>
+            <br xmlns="" data-dce-id="5"/>
+            <dce-text xmlns="" data-dce-id="6">
+                $v='<xsl:value-of select="$v"/>'
             </dce-text>
-            <code xmlns="" data-testid="p2" data-dce-id="6">
-                <xsl:value-of select="$p2"/>
-            </code>
             <br xmlns="" data-dce-id="7"/>
             <dce-text xmlns="" data-dce-id="8">
-                p3:
+                //s='<xsl:value-of select="//s"/>'
+            </dce-text>
+            <br xmlns="" data-dce-id="9"/>
+            <dce-text xmlns="" data-dce-id="10">
+                A='<xsl:value-of select="//s[//s/event] | //attributes/v[not(//s/event)]"/>'
+            </dce-text>
+            <br xmlns="" data-dce-id="11"/>
+            <dce-text xmlns="" data-dce-id="12">
+                has-input =<xsl:value-of select=" $has-input "/>
+            </dce-text>
+            <br xmlns="" data-dce-id="13"/>
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="in-value">
+                <xsl:choose>
+                    <xsl:when test="//s/event">
+                        <xsl:value-of select="//s">
+                        </xsl:value-of>
+                    </xsl:when>
+                    <xsl:when test="//attributes/@v">
+                        <xsl:value-of select="//attributes/@v">
+                        </xsl:value-of>
+                    </xsl:when>
+                    <xsl:otherwise>def</xsl:otherwise>
+                </xsl:choose>
+            </xsl:variable>
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="xx"
+                          select="//s[//s/event] ?? //attributes/@v ?? 'def' "/>
+            <input xmlns="" slice="s" slice-event="input" value="{$in-value}" data-dce-id="14"/>
+            <dce-text xmlns="" data-dce-id="15">$in-value:<xsl:value-of select="$in-value"/> | $xx:<xsl:value-of
+                    select="$xx"/>
             </dce-text>
-            <code xmlns="" data-testid="p3" data-dce-id="9">
-                <xsl:value-of select="$p3"/>
-            </code>
         </dce-root>
     </xsl:template>
     <xsl:template match="/">

package/public/demo/ss.html

@@ -1,5 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<dce-root data-dce-id="1" value="123"
-          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml"><label data-dce-id="2">
-    <dce-text data-dce-id="3"/>
-    <input data-dce-id="4" slice="selected" slice-event="input" value="123"/></label></dce-root>
+<dce-root data-dce-id="1" xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><label data-dce-id="2" xmlns=""><input data-dce-id="3"
+                                                                                            slice="disabled-slice"
+                                                                                            type="checkbox"
+                                                                                            value="disabled"/>
+    <dce-text data-dce-id="4">disabled</dce-text>
+</label>
+        <cem-input data-dce-id="6" value="123"/>
+        <button data-dce-id="7">Next</button>
+
+
+        </p></form>
+</dce-root>

package/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.4.5'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.7.0'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -183,12 +192,26 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
 
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
 
     return fetch(requestClone, { headers })
   }

package/src/custom-element/custom-element.d.ts

@@ -1,5 +1,9 @@
 export function log(x: any): void;
 export function deepEqual(a: any, b:any): boolean|0;
+export function cloneAs(sourceNode: HTMLElement, tag:string): HTMLElement;
+export function mix(objTo: any, objFrom:any): any;
+export function mergeAttr(fromEl: HTMLElement, toEL:HTMLElement): void;
+
 export function xml2dom(xmlString:string): Document;
 export function xmlString(doc:Node|Document): string;
 export function obj2node(o:any, tag:string, doc:Document): HTMLElement;

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

@@ -5,7 +5,7 @@ const XSL_NS_URL  = 'http://www.w3.org/1999/XSL/Transform'
 
 // const log = x => console.debug( new XMLSerializer().serializeToString( x ) );
 
-const attr = (el, attr)=> el.getAttribute?.(attr)
+const attr = (el, attr)=> el?.getAttribute?.(attr)
 ,   isText = e => e.nodeType === 3
 ,   isString = s => typeof s === 'string'
 ,   isNode = e => e && typeof e.nodeType === 'number'
@@ -234,6 +234,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
                 const d = xml2dom( '<xhtml/>' )
                 ,     n = d.importNode(r, true);
                 d.replaceChild(n,d.documentElement);
+                if( n.namespaceURI === HTML_NS_URL && !attr(n,'xmlns'))
+                    n.setAttribute('xmlns',HTML_NS_URL);
                 return xslHtmlNs(n);
             };
             if( e )
@@ -294,6 +296,16 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         fr.append(r)
     }
 
+    [...fr.querySelectorAll('[test]')].forEach( n=>{
+        const t = attr(n,'test')
+        ,     r = t.replace(/hasBoolAttribute\((.*?)\)/g,
+            (match, p1, p2,p3,p4)=>
+            {   const a = p1.substring(1);
+                return `(not($${a} = \'false\') and ($${a} = '' or $${a} = '${a}' or $${a} = 'true' ))`
+            });
+        t!== r && n.setAttribute('test',r);
+    });
+
     [...fr.querySelectorAll('dce-root>attribute')].forEach( a=>
     {
         keepAttributes(a,'namespace,name,select');
@@ -317,10 +329,15 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
             if( select?.length>1 )
             {   p.removeAttribute('select');
                 const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
-                // todo multiple ?? operators
                 emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
-                emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
-                c.firstElementChild.setAttribute('test','string-length('+select[0]+')');
+                c.firstElementChild.setAttribute('test',select[0]);
+                for( let i=1; i<select.length-1; i++)
+                {   const when = c.firstElementChild.cloneNode(true);
+                    emptyNode(when).append( createText(c,'{'+select[i]+'}'));
+                    when.setAttribute('test',select[i]);
+                    c.insertBefore(when, c.lastElementChild);
+                }
+                emptyNode(c.lastElementChild ).append( createText(c,'{'+select[select.length-1]+'}'));
                 p.append(c);
                 val = c.cloneNode(true);
             }else
@@ -329,8 +346,12 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
             a.append(val);
             a.removeAttribute('select');
         }else
-        {   keepAttributes( p, 'name' );
+        {
+            keepAttributes( p, 'name' );
             p.setAttribute('select','/datadom/attributes/'+name)
+
+            if( !hardcodedAttributes[name] )
+                a.remove();
         }
     });
     [...fr.querySelectorAll('[value]')].filter(el=>el.getAttribute('value').match( /\{(.*)\?\?(.*)\}/g )).forEach(el=>
@@ -460,12 +481,15 @@ event2slice( x, sliceNames, ev, dce )
             const v = notChecked? '' : el.value ?? attr( el, 'value' );
             cleanSliceValue();
             if( v === null || v === undefined )
+            {
                 [...s.childNodes].filter(n=>n.localName!=='event').map(n=>n.remove());
+                s.removeAttribute('value');
+            }
             else
-                if( isString(v) )
-                    s.append( createText( d, v) );
-                else
-                    s.append( obj2node(v,'value',s.ownerDocument) )
+            {   const ve = isString(v) ? createText( d, v) : obj2node(v,'value',s.ownerDocument);
+                s.append( ve );
+                s.setAttribute('value',v);
+            }
         }
         return s
     })
@@ -513,11 +537,24 @@ const loadTemplateRoots = async ( src, dce )=>
 export function mergeAttr( from, to )
 {   for( let a of from.attributes)
         try
-        {   a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
+        {   const name = a.name;
+            if( a.namespaceURI )
+            {   if( !to.hasAttributeNS(a.namespaceURI, name) || to.getAttributeNS(a.namespaceURI, name) !== a.value )
+                    to.setAttributeNS( a.namespaceURI, name, a.value )
+            }else
+            {   if( !to.hasAttribute(name) || to.getAttribute(name) !== a.value )
+                    to.setAttribute( a.name, a.value )
+            }
             if( a.name === 'value')
                 to.value = a.value
         }catch(e)
             { console.warn('attribute assignment error',e?.message || e); }
+    const ea = to.dceExportedAttributes
+        , aa = to.getAttribute('dce-exported-attributes')
+        , em = aa ? new Set( aa.split(' ') ) : null;
+    for( let a of to.getAttributeNames() )
+        if( !from.hasAttribute(a) && !ea?.has(a) && !em?.has(a) )
+            to.removeAttribute(a)
 }
 export function assureUnique(n, id=0)
 {
@@ -650,7 +687,7 @@ CustomElement extends HTMLElement
     async connectedCallback()
     {
         if(this.firstElementChild && this.firstElementChild.localName !== 'template')
-            console.warn('custom-element used without template wrapping content\n', this.outerHTML);
+            console.log('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();
@@ -681,11 +718,13 @@ CustomElement extends HTMLElement
                                 .map(splitSliceNames).flat();
 
         const { declaredAttributes, hardcodedAttributes, exposedAttributes } = templateDocs[0];
+        const dceExportedAttributes = new Set([...Object.keys(hardcodedAttributes), ...Object.keys(exposedAttributes)]);
 
         class DceElement extends HTMLElement
         {
             static get observedAttributes(){ return declaredAttributes; }
             #inTransform = 0;
+            get dceExportedAttributes(){ return dceExportedAttributes; }
             connectedCallback()
             {   let payload = sanitizeBlankText(this.childNodes);
                 if( this.firstElementChild?.tagName === 'TEMPLATE' )
@@ -719,8 +758,9 @@ CustomElement extends HTMLElement
                 this.innerHTML='';
                 const attrsRoot = injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) )
                 , inAttrs = a=> this.hasAttribute(a) || [...attrsRoot.children].find(e=>e.localName === a);
+                mergeAttr( this, attrsRoot );
                 Object.keys(hardcodedAttributes).map(a=> inAttrs(a) || attrsRoot.append(createXmlNode(a,hardcodedAttributes[a])) );
-                declaredAttributes.map(a=> inAttrs(a) || attrsRoot.append(createXmlNode(a)) );
+                Object.keys(exposedAttributes).map(a=> inAttrs(a) || attrsRoot.append(createXmlNode(a)) );
 
                 injectData( x, 'dataset', Object.keys( this.dataset ), k => createXmlNode( k, this.dataset[ k ] ) );
                 const sliceRoot = injectData( x, 'slice', sliceNames, k => createXmlNode( k, '' ) )
@@ -753,34 +793,42 @@ CustomElement extends HTMLElement
                 const transform = this.transform = ()=>
                 {   if(this.#inTransform){ debugger }
                     this.#inTransform = 1;
-
-                    const ff = xp.map( (p,i) =>
-                    {   const f = p.transformToFragment(x.ownerDocument, 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 )
-                    })
-
-                    Object.entries(hardcodedAttributes).map(( [a,v] )=>
-                    {   if( !this.hasAttribute(a) && v !== attr(this,a) )
-                        {   this.setAttribute( a, v );
-                            this.#applyAttribute( a, v );
-                        }
-                    });
-
-                    Object.keys(exposedAttributes).map( a =>
-                    {   let v = attr(this.firstElementChild,a);
-                        if( v !== attr(this,a) )
-                        {   this.setAttribute( a, v );
-                            this.#applyAttribute( a, v );
-                        }
-                    });
+                    const renderModel = ()=>
+                    {
+                        const ff = xp.map( (p,i) =>
+                        {   const f = p.transformToFragment(x.ownerDocument, 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 )
+                        })
+                        let attrChangedCount = 0;
+                        Object.entries(hardcodedAttributes).map(( [a,v] )=>
+                        {   if( !this.hasAttribute(a) && v !== attr(this,a) )
+                            {   this.setAttribute( a, v );
+                                this.#applyAttribute( a, v );
+                                attrChangedCount++;
+                            }
+                        });
+
+                        Object.keys(exposedAttributes).map( a =>
+                        {   let v = attr(this.firstElementChild,a);
+                            if( v !== attr(this,a) )
+                            {   this.setAttribute( a, v );
+                                this.#applyAttribute( a, v );
+                                attrChangedCount++;
+                            }
+                        });
+                        return attrChangedCount;
+                    };
+                    if( renderModel() )
+                        if( renderModel() )
+                            console.warn("model update should not be the result of transform more than once");
 
                     function getSliceTarget(el)
                     {   let r = el;
@@ -868,13 +916,15 @@ CustomElement extends HTMLElement
             #applyAttribute(name, newValue)
             {   if( 'value' === name )
                     this.value = newValue;
+                const attrs = this.xml.querySelector('attributes');
                 let a = this.xml.querySelector(`attributes>${name}`);
                 if( a )
                     emptyNode(a).append( createText(a,newValue) );
                 else
                 {   a = create( name, newValue, this.xml );
-                    this.xml.querySelector('attributes').append( a );
+                    attrs.append( a );
                 }
+                this.#inTransform || attrs.setAttribute(name,newValue);
 
                 this.dispatchEvent(new CustomEvent('change', { bubbles: true,detail: { [name]: newValue }}))
             }

package/src/custom-element/demo/attributes.html

@@ -0,0 +1,153 @@
+<!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>parameters - 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>
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+</nav>
+<main>
+    <p><code>attribute</code> is used for DCE attributes declaration and track the attributes changes. It also be used by IDE and validation.</p>
+    <p>The attribute can be changed by component itself and used as output to the container.
+        Usual case is when <code>value</code> attribute is updated from inside.</p>
+    <p>Initial value of attribute is available on the <code>attributes</code> node attribute as in <code>/datadom/attributes/@attr1</code></p>
+    <p>The current, i.e. including the changes by component itself, attribute value is a child node of <code>attributes</code> as in <code>/datadom/attributes/attr1</code>.</p>
+    <p>To define the attribute which is modified from within,  the 3 parts are usually used as in <code>//s[//s/event] ?? //attributes/@v ?? 'def' </code>
+    <ol>
+    <li><code>//s[//s/event]</code> the slice <code>s</code> with event gives the slice value which was modified by user event like input</li>
+    <li><code>//attributes/@v</code> the attribute passed by container</li>
+    <li><code>'def' </code> the default value which used when no user input or attribute set by container</li>
+</ol>
+    </p>
+</main>
+<html-demo-element legend="attributes definition" >
+    <p slot="description">
+    <code>attribute</code> is used for DCE attributes declaration and track the attributes changes. It also be used by IDE and validation.
+
+</p>
+    <template>
+        <custom-element tag="dce-link" hidden>
+            <attribute name="p1" >default_P1                </attribute>
+            <attribute name="p2" select="'always_p2'"       ></attribute>
+            <attribute name="p3" select="//attributes/@p3 ?? 'def_P3' " ></attribute>
+            p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
+        </custom-element>
+        <dce-link id="dce1" ></dce-link>
+        <section>
+            <dce-link id="dce2" p1="123" p2="override ignored as select is defined"></dce-link> <br/>
+            <div><input id="i1" value="p1" />  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
+            <div><input id="i2" value="p2" />  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
+            <div><input id="i3" value="p3" />  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
+        </section>
+        <dce-link id="dce3" p1="123" p3="qwe"></dce-link> |
+
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="attribute from slice">
+    <p slot="description">
+When slice value points to attribute, it would be populated on slice change.<br/>
+    Type in the input field to see the variable $title change. <br/>
+    Hover the mouse to see the title attribute text popup.<br/>
+    Inspect DCE node in dev tools to see `title` attribute updated while typing.
+
+</p>
+
+    <template>
+        <custom-element>
+            <template>
+                <attribute name="title" select="//title ?? '😃'" ></attribute>
+                <input slice="/datadom/attributes/title" slice-event="keyup"/>
+                title attribute: {$title}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="V attribute matches input value" description="
+    Type in the input field and observe in DevTools the V attribute changed.
+">
+    <template>
+<custom-element tag="x-input" >
+    <template>
+        <attribute name="is-changed" select="count(//s/event) &gt; 0"></attribute>
+        <attribute name="v" select="//s[//s/event] ?? //attributes/@v ?? 'def' "></attribute>
+        /datadom/attributes/v='{/datadom/attributes/v}'<br/>
+        same as v='{v}'<br/>
+        same as $v='{$v}'<br/>
+        //attributes/@v='{//attributes/@v}'<br/>
+        //s='{//s}'<br/>
+        is-changed ={ is-changed }<br/>
+        <input slice="s" slice-event="input" value="{//attributes/v}"/>
+    </template>
+</custom-element>
+<x-input></x-input>
+<x-input v="V1"></x-input>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="attribute defaults, from container, and from slice" description="
+    Type in the input field and observe in DevTools the V attribute changed.
+">
+    <template>
+<custom-element tag="attr-demo">
+    <template>
+        <variable name="has-input" select="count(//s/*) &gt; 0"></variable>
+        <attribute name="v" select="//s[//s/event] ?? //attributes/@v ?? 'def' "></attribute>
+        //attributes/v='{//attributes/v}'<br/>
+        //attributes/@v='{//attributes/@v}'<br/>
+        $v='{$v}'<br/>
+        //s='{//s}'<br/>
+        A='{//s[//s/event] | //attributes/v[not(//s/event)]}'<br/>
+        has-input ={ $has-input }<br/>
+        <input slice="s" slice-event="input" />
+    </template>
+</custom-element>
+
+<attr-demo></attr-demo>
+<attr-demo v="From Container"></attr-demo>
+    </template>
+</html-demo-element>
+
+<details>
+    <summary>Attributes processing</summary>
+    To be available in template, <code>custom-element</code> attributes should be
+    defined by <code>attribute</code> markup as shown above.
+    The value is taken from attribute text content or from <code>select</code> XPath expression<br/>
+
+    Declared in such way, attributes are exposed via <code><a
+        href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes"
+        >observedAttributes</a></code>. <br/>
+    The template exposes those attributes as <code>xsl:param</code> which makes the attribute value available as
+    xsl variable (as attribute name prefixed with $). <br/>
+    After transformation the attributes values are read from CE root and copied into DCE component. <br/>
+    The DCE attribute change from outside invokes <code>attributeChangedCallback</code> which triggers DCE re-render.
+    <p>
+        The <code>value</code> attribute is usual case to be propagated from within of <code>custom-element</code>.
+        See the <a href="./form.html#sample-5">using custom-element as form input</a> example.
+    </p>
+    &bull; <a href="https://github.com/EPA-WG/custom-element/blob/main/docs/attributes.md">Design docs</a>
+</details>
+
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/src/custom-element/demo/html-template.html

@@ -73,7 +73,7 @@
     <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>
-<math id="sophomores-dream" display="block">
+<math id="sophomores-dream"  data-testid="ml-test" display="block">
     <mrow>
         <msubsup>
             <mo>∫</mo>