@epa-wg/custom-element 0.0.31 → 0.0.33

package/README.md

@@ -47,7 +47,7 @@ This project is a POC( Proof of Concept ) targeting to become a base for native
 
 # use
 
-Use the [bootstrap project](https://github.com/EPA-WG/custom-element-bootstrap) with all pre-configured or
+[//]: # (Use the [bootstrap project](https://github.com/EPA-WG/custom-element-bootstrap) with all pre-configured or)
 ## install
 use via CDN
 ```html
@@ -341,16 +341,16 @@ within template
 [css-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/scoped-css.html
 [slice-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/data-slices.html
 [hex-grid-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/hex-grid.html
-[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.31/demo/hex-grid-transform.png
+[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.33/demo/hex-grid-transform.png
 [local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
 [http-request-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
 [location-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.31/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.31/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.31/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.33/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.33/coverage/src/custom-element/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.33/storybook-static/index.html?path=/story/welcome--introduction
 [sandbox-url]:    https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
 [webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
 [webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg

package/bin/xslDtd2Ide.mjs

@@ -116,7 +116,7 @@ writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined
 const intelliJ = {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.31",
+    "version": "0.0.33",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/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/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'
@@ -15,6 +15,7 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
 ,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
 ,   isValidTagName = tag=> ( /^[_a-zA-Z][-_:a-zA-Z0-9]*$/ .test(tag) )
+,   mix = (o,kv) => { Object.keys(kv).map(k=> o[k] = kv[k] ) ; return o}
 ,   create = ( tag, t = '', d=document ) =>
 {
     const create = tag => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
@@ -29,11 +30,13 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 {   const px = p.ownerDocument.createElementNS(p.namespaceURI,tag);
     for( let a of p.attributes)
         px.setAttribute(a.name, a.value);
-    while( p.firstChild )
-        px.append(p.firstChild);
+    for( let c of p.childNodes )
+        px.append(c.cloneNode(true));
     return px;
 };
 
+export {cloneAs,mix};
+
     function
 ASSERT(x)
 {
@@ -149,8 +152,13 @@ tagUid( node )
     export function
 createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 {
+    const declaredAttributes = []
+    , hardcodedAttributes = {}
+    , exposedAttributes={};
+
     if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
-        return tagUid(templateNode)
+        return tagUid(mix( templateNode, { declaredAttributes, hardcodedAttributes, exposedAttributes } ));
+
     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 xmlns="${ HTML_NS_URL }"><xsl:apply-templates select="*" /></dce-root></xsl:template>
@@ -198,9 +206,9 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     </xsl:template>
     <xsl:template mode="sanitize" match="xhtml:input">
         <xsl:element name="{local-name()}">
-            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+            <xsl:apply-templates mode="sanitize" select="*[not(name()='slice')]|@*|text()"/>
         </xsl:element>
-        <xsl:for-each select="*">
+        <xsl:for-each select="slice">
             <xsl:copy>
                 <xsl:attribute name="for" >^</xsl:attribute>
                 <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
@@ -285,35 +293,64 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         [...fr.childNodes].forEach(n=>r.append(n));
         fr.append(r)
     }
-    const params = [];
+
+    [...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');
         const p = cloneAs(a,'xsl:param')
         ,  name = attr(a,'name');
+
+        declaredAttributes.push(name);
+        if( a.childNodes.length)
+            hardcodedAttributes[name] = a.textContent;
+
         payload.append(p);
-        keepAttributes(p,'select,name');
-        let select = attr(p,'select')?.split('??')
-        if( !select)
-        {   select = ['//'+name, `'${p.textContent}'`];
-            emptyNode(p);
-            p.setAttribute('name',name);
-        }
-        let val;
-        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]+'}'));
-            c.firstElementChild.setAttribute('test',select[0]);
-            p.append(c);
-            val = c.cloneNode(true);
+
+        if( a.hasAttribute('select') )
+        {
+            exposedAttributes[ name ] = attr( a, 'select' );
+            keepAttributes( p, 'select,name' );
+
+            let select = attr(a,'select').split('??');
+
+            let val;
+            if( select?.length>1 )
+            {   p.removeAttribute('select');
+                const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
+                emptyNode(c.firstElementChild).append( createText(c,'{'+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
+                val = cloneAs(a,'xsl:value-of');
+            val.removeAttribute('name');
+            a.append(val);
+            a.removeAttribute('select');
         }else
-            val=cloneAs(a,'xsl:value-of');
-        val.removeAttribute('name');
-        a.append(val);
-        a.removeAttribute('select');
-        params.push(p)
+        {
+            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=>
     {   const v = attr(el,'value');
@@ -338,8 +375,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 
     forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
 
-    const ret = tagUid(xslDom)
-    ret.params = params;
+    const ret = tagUid(xslDom);
+    mix( ret, { declaredAttributes, hardcodedAttributes, exposedAttributes } );
     return ret;
 }
     export async function
@@ -442,12 +479,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
     })
@@ -494,10 +534,25 @@ const loadTemplateRoots = async ( src, dce )=>
 }
 export function mergeAttr( from, to )
 {   for( let a of from.attributes)
-    {   a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
-        if( a.name === 'value')
-            to.value = a.value
-    }
+        try
+        {   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)
 {
@@ -530,7 +585,7 @@ export function appendByDceId(parent,e,k)
 }
 export function merge( parent, fromArr )
 {
-    if( 'dce-root' === parent.firstElementChild?.localName && 'dce-root' !== fromArr[0].localName)
+    if( 'dce-root' === parent.firstElementChild?.localName && 'dce-root' !== fromArr[0]?.localName)
         return;
     if( !fromArr.length )
         return 'dce-root' !== parent.firstElementChild?.localName && removeChildren(parent);
@@ -658,13 +713,16 @@ CustomElement extends HTMLElement
         , sliceNames = sliceNodes.map(e=>attr(e,'slice'))
                                 .filter(n=>!n.includes('/'))
                                 .filter((v, i, a)=>a.indexOf(v) === i)
-                                .map(splitSliceNames).flat()
-        , declaredAttributes = templateDocs.reduce( (ret,t) => { if( t.params ) ret.push( ...t.params ); return ret; }, [] );
+                                .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.map( a=>attr(a,'name')); }
+            static get observedAttributes(){ return declaredAttributes; }
             #inTransform = 0;
+            get dceExportedAttributes(){ return dceExportedAttributes; }
             connectedCallback()
             {   let payload = sanitizeBlankText(this.childNodes);
                 if( this.firstElementChild?.tagName === 'TEMPLATE' )
@@ -696,7 +754,12 @@ CustomElement extends HTMLElement
                 xslNs(payloadNode);
                 xslHtmlNs(payloadNode);
                 this.innerHTML='';
-                const attrsRoot = injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
+                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])) );
+                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, '' ) )
                 ,     sliceXPath = x => xPath(x, sliceRoot);
@@ -728,27 +791,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 )
-                    })
-
-                    DceElement.observedAttributes.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;
@@ -836,13 +914,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/demo/a.html

@@ -0,0 +1,73 @@
+<!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>
+
+
+
+        <custom-element src="./html-template.html#dwc-logo">
+            <template><i>loading SVG from templates file ...</i></template>
+        </custom-element>
+
+
+</body>
+</html>

package/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/demo/data-slices.html

@@ -233,8 +233,8 @@
     </template>
 </html-demo-element>
 
-<html-demo-element legend="13. Radio buttons use"
-                   description="The value is empty when unchecked. Otherwise taken either from slice-value or value attribute.">
+<html-demo-element legend="13. Radio group"
+                   description="The value propagated into slice from the last checked radiobutton.">
     <p>Check the radiobutton to see the value in slice</p>
     <template>
         <custom-element>

package/demo/external-template.html

@@ -57,6 +57,7 @@
 
         svg {
             max-height: 3rem;
+            min-height: 2rem;
         }
     </style>
 </head>

package/demo/form.html

@@ -233,6 +233,48 @@
     </template>
 </html-demo-element>
 
+<html-demo-element legend="5. using custom-element as form input"
+                   description="bypass value to container form "
+                   id="sample-5"
+    >
+    <ol>
+        <li> select radio in top group</li>
+        <li> observe the fruit selected on the left</li>
+        <li> observe the warning message bellow button</li>
+        <li> next button does not submit the form</li>
+        <li> select radio in bottom group</li>
+        <li> observe the fruit selected on the right</li>
+        <li> same fruit selection would eliminate the warning and
+            allow the form submission</li>
+        <li> after submit, observe the URL parameters 'inp-1=🍏&inp-2=🍏'  </li>
+    </ol>
+    <template>
+        <custom-element tag="sample-input">
+            <template>
+                <attribute name="name" ></attribute>
+                <attribute name="value" select="//val"></attribute>
+                {$name}
+                <label><input type="radio" name="{$name}" slice="val" value="🍏">Apple</label>
+                <label><input type="radio" name="{$name}" slice="val" value="🍌">Banana</label>
+            </template>
+        </custom-element>
+        <custom-element>
+            <template>
+                <form slice="cart-form" action="#sample-5"
+                    custom-validity="(//inp1 = //inp2) ?? 'pick same fruit'"
+                    >
+                    <sample-input slice="inp1" name="inp-1"></sample-input>
+                    <sample-input slice="inp2" name="inp-2"></sample-input>
+                    <button>Next</button>
+                    Picked :{//inp1} and {//inp2}
+
+                    <p>{//cart-form/@validation-message}</p>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 
 </body>

package/demo/hex-grid-dce.html

@@ -107,7 +107,7 @@
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
     <img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
     <img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
-    <img src="https://global.discourse-cdn.com/standard17/uploads/threejs/original/2X/b/be2f75f72751c11cbe1593c69a99a52900bf12cb.svg" alt="ThreeJS" href="https://threejs.org/"/>
+    <img src="https://threejs.org/files/favicon.ico" alt="ThreeJS" href="https://threejs.org/"/>
     <img src="https://www.blazejs.org/logo/icon.png" alt="BlazeJS"/>
     <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/tailwindcss.webp" alt="Tailwind CSS"/>
     <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/flowbite.webp" alt="Flowbite"/>

package/demo/hex-grid.html

@@ -52,7 +52,7 @@
         <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
         <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
         <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
-        <img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
+        <img src="https://refine.dev/img/favicon.ico" alt="Refine" href="https://refine.dev/"/>
         <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
         <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
         <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>

package/demo/s.xml

@@ -1,18 +1,75 @@
 <?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>
+        <div xmlns="http://www.w3.org/1999/xhtml" slot="leading" data-dce-id="4">
+            <cem-icon image="history_edu" class="input-focused" data-dce-id="5">
+                <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">
+                    <span xmlns="" class="icon material-icons" data-dce-id="5">history_edu</span>
+                </dce-root>
+            </cem-icon>
+            <cem-icon image="edit" class="input-unfocused" data-dce-id="6">
+                <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">
+                    <span xmlns="" class="icon material-icons" data-dce-id="5">edit</span>
+                </dce-root>
+            </cem-icon>
+        </div>
+        <div xmlns="http://www.w3.org/1999/xhtml" slot="trailing" data-dce-id="7">
+            <label class="eye-contailer" for="visible-cb" data-dce-id="8">
+                <cem-icon image="visibility" class="visible-ico" tabindex="0" data-dce-id="9">
+                    <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">
+                        <span xmlns="" class="icon material-icons" data-dce-id="5">visibility</span>
+                    </dce-root>
+                </cem-icon>
+                <cem-icon image="visibility_off" class="invisible-ico" tabindex="0" data-dce-id="10">
+                    <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">
+                        <span xmlns="" class="icon material-icons" data-dce-id="5">visibility_off</span>
+                    </dce-root>
+                </cem-icon>
+            </label>
+            <cem-icon image="close" class="clear" tabindex="0" slice="password" slice-event="click" slice-value="''"
+                      data-dce-id="11">
+                <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">
+                    <span xmlns="" class="icon material-icons" data-dce-id="5">close</span>
+                </dce-root>
+            </cem-icon>
+            <dce-text data-dce-id="12">️
+            </dce-text>
+        </div>
     </payload>
-    <attributes>
+    <attributes xmlns="" label="password sample" value="secret word" slice="password" data-dce-id="3" type="">
         <xmlns/>
-        <justify>end</justify>
-        <data-dce-id>2</data-dce-id>
-        <direction>row</direction>
+        <label>password sample</label>
+        <value>secret word</value>
+        <slice>password</slice>
+        <data-dce-id>3</data-dce-id>
+        <type></type>
     </attributes>
     <dataset>
-        <dceId>2</dceId>
+        <dceId>3</dceId>
     </dataset>
-    <slice/>
+    <slice>
+        <selected/>
+        <password image="close" class="clear" tabindex="0" slice="password" slice-event="click" slice-value="''"
+                  data-dce-id="11">
+            <event isTrusted="true" sliceProcessed="1" pointerId="1" width="1" height="1" pressure="0" tiltX="0"
+                   tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0"
+                   pointerType="mouse" isPrimary="false" persistentDeviceId="0" screenX="345" screenY="682"
+                   clientX="345" clientY="595" ctrlKey="false" shiftKey="false" altKey="false" metaKey="false"
+                   button="0" buttons="0" pageX="345" pageY="4354" x="345" y="595" offsetX="14" offsetY="15"
+                   movementX="0" movementY="0" layerX="248" layerY="27" detail="1" which="1" type="click" eventPhase="3"
+                   bubbles="true" cancelable="true" defaultPrevented="false" composed="true"
+                   timeStamp="1974517.2999999523" returnValue="true" cancelBubble="false" NONE="0" CAPTURING_PHASE="1"
+                   AT_TARGET="2" BUBBLING_PHASE="3">
+                <relatedTarget/>
+                <fromElement/>
+                <toElement/>
+                <sourceCapabilities firesTouchEvents="false"/>
+            </event>
+        </password>
+    </slice>
 </datadom>

package/demo/s.xslt

@@ -1,20 +1,93 @@
-<?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">
+<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">
     <xsl:template match="ignore">
         <xsl:choose>
-            <xsl:when test="//attr"><xsl:value-of select="//attr"/></xsl:when>
-            <xsl:otherwise><xsl:value-of select="def"/></xsl:otherwise>
-        </xsl:choose><xsl:value-of select="."/></xsl:template>
-    <xsl:template mode="payload" match="attributes"><xsl:param name="direction"><xsl:choose>
-            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
-            <xsl:otherwise><xsl:value-of select="'row'"/></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="direction"><xsl:choose>
-            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
-            <xsl:otherwise><xsl:value-of select="'row'"/></xsl:otherwise>
-        </xsl:choose></xsl:attribute><xsl:call-template name="slot">
-            <xsl:with-param name="slotname" select="''"/>
-            <xsl:with-param name="defaultvalue"/>
-        </xsl:call-template></dce-root></xsl:template>
+            <xsl:when test="//attr">
+                <xsl:value-of select="//attr"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:value-of select="def"/>
+            </xsl:otherwise>
+        </xsl:choose>
+        <xsl:value-of select="."/>
+    </xsl:template>
+    <xsl:template mode="payload" match="attributes">
+        <xsl:param name="v">
+            <xsl:choose>
+                <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' "/>
+                </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: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="//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' "/>
+                    </xsl:otherwise>
+                </xsl:choose>
+            </xsl:attribute>
+            <dce-text xmlns="" data-dce-id="2">
+
+                //attributes/v='<xsl:value-of select="//attributes/v"/>'
+            </dce-text>
+            <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>
+            <br xmlns="" data-dce-id="7"/>
+            <dce-text xmlns="" data-dce-id="8">
+                //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>
+        </dce-root>
+    </xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
@@ -23,7 +96,7 @@
         <xsl:param name="defaultvalue"/>
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
                 <xsl:copy-of select="$defaultvalue"/>

package/demo/ss.html

@@ -1,24 +1,14 @@
 <?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 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/docs/attributes.md

@@ -0,0 +1,86 @@
+# Attributes in `custom-element`
+
+# Declaring
+In order to have access to attributes and expose them back as `custom-element` attributes in runtime, they have to be 
+declared as list of direct children in CE `template` body:
+```html
+<custom-element tag="sample-el">
+    <template>
+        <attribute name="p1"></attribute>
+        <attribute name="p2">DEFAULT VALUE</attribute>
+        <attribute name="p3" select="//from-input"></attribute>
+        <input slot="from-input" />
+        { $p1 } { $p2 } { $p3 }
+    </template>
+</custom-element>
+```
+## Unassigned attribute value
+The `p1` attribute meant to reflect the value of attribute passed from `sample-1` use.
+```html
+<sample-el p1="abc"></sample-el>
+```
+The value inside of CE rendered by `{ $p1 }` would be `abc` string. 
+It does not change as there is no dynamic selector is set. 
+
+## Fixed value
+```html
+<sample-el></sample-el>
+<sample-el p2="DEFAULT VALUE"></sample-el>
+```
+In given example both instances would have same value for `p2` attribute. 
+The missing attribute on 1st `sample-element` would be filled in runtime by CE.
+
+## `select` expression
+used for dynamic attribute propagation from within CE. For `sample-el` `p3` would be in sync with input value.
+
+# Implementation details
+The source of truth for internal attributes collection is `/datadom/attributes`, an internal instance xml dom model.
+As a "state" object, any change to it would be reflected in
+* CE instance attributes
+* rendered by template DOM, the attributed in template are referenced as 
+  * XSLT variables, a name prefixed with `$`, like `$p1`. Recommended syntax. 
+  * as `/datadom/attributes/*` XPath in template.
+  * as name, i.e. `p1` in XPath. The current data scope for XPath in template matches `/datadom/attributes` node. 
+
+## Declaring 
+`custom-element` resolves template body and reads all its direct `attribute` children. 
+* All attributes are stored in template-associated  `declaredAttributes` collection.
+* The attributes with text value (p2), are stored in template-associated `hardcodedAttributes` key:value collection.
+* The attributes with text value or `select` (as p2,p3), are stored in template-associated `exposedAttributes` collection.
+* Template is translated into XSL where all attributes are replaced by 
+```html
+<xsl:param name="p1" select="/datadom/attributes/p1"></xsl:param>
+<xsl:param name="p2" select="/datadom/attributes/p2"></xsl:param>
+<xsl:param name="p3" select="//from-input"></xsl:param>
+```
+The `select` is directly copied from `attribute` (p3), otherwise when `select` is missing (p2,p3), 
+the values are taken from model.
+
+`declaredAttributes` is used as a value for `observedAttributes`.
+
+## Instance initialization
+* keys from `declaredAttributes` saved into `/datadom/attributes`
+* value from `hardcodedAttributes` saved into model
+* all attributes with value from instance populated into model
+
+## 1st and all renders
+happen initially `onConnectedCallback` and on each model change ( triggered by slot events, etc. ).
+
+Before render, `exposedAttributes` collection is synced with DCE attributes by assigning the values from attribute 
+`select` XPath. Same value is propagated into matching `/datadom/attributes`.
+
+The `attributeChangedCallback` would be triggered and invoke the render on each changed attribute.
+`this.#inTransform` flag prevents the recursive render calls. 
+
+## Attribute changes from outside
+* Would trigger the `attributeChangedCallback`
+* which would set the `/datadom/attributes`
+* and trigger render cycle
+
+Recursive attribute cycle from render is prevented by comparing the value.
+
+WARNING: the infinite loop is possible by
+* making one attribute depend on another which depends on first, possibly over multiple indirect dependencies.
+* changing the attribute by `select` and forced to change again from outside by overriding attribute value on CE instance.
+
+Such patterns are unlikely. Detection mechanism TBD.

package/ide/web-types-dce.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.31",
+    "version": "0.0.33",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/ide/web-types-xsl.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.31",
+    "version": "0.0.33",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/index.html

@@ -51,7 +51,7 @@
         <a href="./demo/module-url.html"        >importmap          </a> <br/>
         <a href="./demo/hex-grid.html"          >hex grid lib       </a> |
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
-        <a href="./demo/parameters.html"        >attributes         </a> |
+        <a href="./demo/attributes.html"        >attributes         </a> |
         <a href="./demo/data-slices.html"       >data slices/events </a> |
         <a href="./demo/form.html"              >Form validation    </a> |
         <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a><br/>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.31",
+    "version": "0.0.33",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",

package/demo/parameters.html

@@ -1,70 +0,0 @@
-<!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>
-<html-demo-element legend="param as attributes definition" description="
-params needed to declare DCE attributes and track the attributes changes. It also be used by IDE and validation.
-">
-    <template>
-        <custom-element tag="dce-link" hidden>
-            <attribute name="p1" >default_P1                </attribute>
-            <attribute name="p2" select="'always_p2'"       ></attribute>
-            <attribute name="p3" select="//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="slice propagates attribute" description="
-when slice value points to attribute, it would be populated on slice change
-">
-    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.
-
-    <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>
-
-
-
-<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
-
-</body>
-</html>