@epa-wg/custom-element 0.0.21 → 0.0.23

package/README.md

@@ -348,9 +348,9 @@ within template
 [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.21/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.21/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.21/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.23/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.23/coverage/src/custom-element/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.23/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.21",
+    "version": "0.0.23",
     "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 xml2dom(xmlString:string): Document;
+export function xmlString(doc:Node|Document): string;
+export function obj2node(o:any, tag:string, doc:Document): HTMLElement;
+export function tagUid(node:HTMLElement): HTMLElement;
 
 /**
  * @summary Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating

package/custom-element.js

@@ -13,7 +13,6 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
 ,   removeChildren = n => { while(n.firstChild) n.firstChild.remove(); return n; }
 ,   emptyNode = n => {  n.getAttributeNames().map( a => n.removeAttribute(a) ); return removeChildren(n); }
-,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ))
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
 ,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
 ,   cloneAs = (p,tag) =>
@@ -23,7 +22,7 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
     while( p.firstChild )
         px.append(p.firstChild);
     return px;
-}
+};
 
     function
 ASSERT(x)
@@ -66,17 +65,22 @@ assureSlot( e )
     export function
 obj2node( o, tag, doc )
 {   const t = typeof o;
-    if( t === 'function'){debugger}
     if( t === 'string' )
         return create(tag,o,doc);
     if( t === 'number' )
         return create(tag,''+o,doc);
 
     if( o instanceof Array )
-    {   const ret = create('array');
+    {   const ret = create('array','',doc);
         o.map( ae => ret.append( obj2node(ae,tag,doc)) );
         return ret
     }
+    if( o instanceof FormData )
+    {   const ret = create('form-data','',doc);
+        for( const p of o )
+            ret.append( obj2node(p[1],p[0],doc) );
+        return ret
+    }
     const ret = create(tag,'',doc);
     for( let k in o )
         if( isNode(o[k]) || typeof o[k] ==='function' || o[k] instanceof Window )
@@ -91,13 +95,14 @@ obj2node( o, tag, doc )
     export function
 tagUid( node )
 {   // {} to xsl:value-of
-    forEach$(node,'*',d => [...d.childNodes].filter( e=>e.nodeType === 3 ).forEach( e=>
-    {   if( e.parentNode.localName === 'style' )
-            return;
-        const m = e.data.matchAll( /{([^}]*)}/g );
+    forEach$(node,'*',d => [...d.childNodes]
+        .filter( e => e.nodeType === 3 && e.parentNode.localName !== 'style' && e.data )
+        .forEach( e=>
+    {   const s = e.data,
+              m = s.matchAll( /{([^}]*)}/g );
         if(m)
         {   let l = 0
-            , txt = t => createText(e,t||'')
+            , txt = t => createText(e,t)
             ,  tt = [];
             [...m].forEach(t=>
             {   if( t.index > l )
@@ -107,8 +112,8 @@ tagUid( node )
                 tt.push(v);
                 l = t.index+t[0].length;
             })
-            if( l < e.data.length)
-                tt.push( txt( e.data.substring(l,e.data.length) ));
+            if( l < s.length)
+                tt.push( txt( s.substring(l,s.length) ));
             if( tt.length )
             {   for( let t of tt )
                     d.insertBefore(t,e);
@@ -250,7 +255,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     const   slotCall = $(xslDom,'call-template[name="slot"]')
     ,       slot2xsl = s =>
     {   const v = slotCall.cloneNode(true)
-        ,  name = attr(s,'name') || '';
+        ,  name = attr(s,'name');
         name && v.firstElementChild.setAttribute('select',`'${ name }'`)
         for( let c of s.childNodes)
             v.lastElementChild.append(c)
@@ -297,16 +302,20 @@ deepEqual(a, b, O=false)
             return O
     return true;
 }
+const splitSliceNames = v => v.split('|').map( s=>s.trim() ).filter(s=>s);
+
     export const
 assureSlices = ( root, names) =>
-    names.split('|').map(n=>n.trim()).map( xp =>
-    {   if(xp.includes('/'))
-        {   const ret = [], r = root.ownerDocument.evaluate( xp, root );
+    splitSliceNames(names).map( xp =>
+    {   let d = root.ownerDocument
+        , append = n=> (root.append(n),n);
+        if(xp.includes('/'))
+        {   const ret = [], r = d.evaluate( xp, root );
             for( let n; n = r.iterateNext(); )
                 ret.push( n )
             return ret
         }
-        return [...root.childNodes].find(n=>n.localName === xp) || create(xp);
+        return [...root.childNodes].find(n=>n.localName === xp) || append( create(xp,'',d) );
     }).flat();
 
 /**
@@ -319,19 +328,24 @@ assureSlices = ( root, names) =>
     export function
 event2slice( x, sliceNames, ev, dce )
 {
+    if( ev.sliceProcessed )
+        return
+    ev.sliceProcessed = 1;
     // evaluate slices[]
     // inject @attributes
     // inject event
     // evaluate slice-value
     // slice[i] = slice-value
-    assureSlices(x,sliceNames).map( s =>
+    return assureSlices( x, sliceNames ?? '' ).map( s =>
     {
         const d = x.ownerDocument
         ,    el = ev.sliceEventSource
         ,   sel = ev.sliceElement
-        ,   cleanSliceValue = ()=>[...s.childNodes].filter(n=>n.nodeType===3 || n.localName==='value').map(n=>n.remove());
+        ,   cleanSliceValue = ()=>[...s.childNodes].filter(n=>n.nodeType===3 || n.localName==='value' || n.localName==='form-data').map(n=>n.remove());
         el.getAttributeNames().map( a => s.setAttribute( a, attr(el,a) ) );
         [...s.childNodes].filter(n=>n.localName==='event').map(n=>n.remove());
+        if( 'validationMessage' in el )
+            s.setAttribute('validation-message', el.validationMessage);
         ev.type==='init' && cleanSliceValue();
         s.append( obj2node( ev, 'event', d ) );
         if( sel.hasAttribute('slice-value') )
@@ -343,7 +357,12 @@ event2slice( x, sliceNames, ev, dce )
             cleanSliceValue();
             s.append( createText( d, v ) );
         }else
-        {   const v = el.value ?? attr( sel, 'value' ) ;
+        {   if( 'elements' in el )
+            {   cleanSliceValue();
+                s.append( obj2node(new FormData(el),'value', s.ownerDocument) )
+                return s
+            }
+            const v = el.value ?? attr( sel, 'value' ) ;
             cleanSliceValue();
             if( v === null || v === undefined )
                 [...s.childNodes].filter(n=>n.localName!=='event').map(n=>n.remove());
@@ -353,6 +372,7 @@ event2slice( x, sliceNames, ev, dce )
                 else
                     s.append( obj2node(v,'value',s.ownerDocument) )
         }
+        return s
     })
 }
 
@@ -360,7 +380,6 @@ function forEach$( el, css, cb){
     if( el.querySelectorAll )
         [...el.querySelectorAll(css)].forEach(cb)
 }
-const getByHashId = ( n, id )=> ( p => n===p? null: (p && ( p.querySelector(id) || getByHashId(p,id) ) ))( n.getRootNode() )
 const loadTemplateRoots = async ( src, dce )=>
 {
     if( !src || !src.trim() )
@@ -388,12 +407,7 @@ const loadTemplateRoots = async ( src, dce )=>
     }catch (error){ return [dce]}
 }
 export function mergeAttr( from, to )
-{   if( isText(from) )
-    {
-        if( !isText(to) ){ debugger }
-        return
-    }
-    for( let a of from.attributes)
+{   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
@@ -472,12 +486,18 @@ export const xPathDefaults = x=>
     // return xx.length ? `${a}|(${xPathDefaults(xx.join('??'))})[not(${a})]`: a
 }
 export const xPath = (x,root)=>
-{   x = xPathDefaults(x);
+{
+    const xx = x.split('??');
+    if( xx.length > 1 )
+        return xPath(xx[0], root) || xPath(xx[1], root);
+
+    x = xPathDefaults(x);
 
     const it = root.ownerDocument.evaluate(x, root);
     switch( it.resultType )
     {   case XPathResult.NUMBER_TYPE: return it.numberValue;
         case XPathResult.STRING_TYPE: return it.stringValue;
+        case XPathResult.BOOLEAN_TYPE: return it.booleanValue;
     }
 
     let ret = '';
@@ -529,7 +549,10 @@ CustomElement extends HTMLElement
 
         const dce = this
         , sliceNodes = [...this.templateNode.querySelectorAll('[slice]')]
-        , sliceNames = sliceNodes.map(e=>attr(e,'slice')).filter(n=>!n.includes('/')).filter((v, i, a)=>a.indexOf(v) === i)
+        , 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; }, [] );
 
         class DceElement extends HTMLElement
@@ -540,6 +563,8 @@ CustomElement extends HTMLElement
             {   let payload = 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;
@@ -563,7 +588,7 @@ CustomElement extends HTMLElement
                 })(x.ownerDocument.createElement( tag ))
                 injectData( x, 'payload'    , payload , assureSlot );
                 this.innerHTML='';
-                injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
+                const attrsRoot = injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
                 injectData( x, 'dataset', Object.keys( this.dataset ), k => createXmlNode( k, this.dataset[ k ] ) );
                 const sliceRoot = injectData( x, 'slice', sliceNames, k => createXmlNode( k, '' ) )
                 ,     sliceXPath = x => xPath(x, sliceRoot);
@@ -585,14 +610,12 @@ CustomElement extends HTMLElement
                 let timeoutID;
 
                 this.onSlice = ev=>
-                {   ev.stopPropagation?.();
-                    ev.sliceEventSource = ev.currentTarget || ev.target;
-                    sliceEvents.push(ev);
+                {   sliceEvents.push(ev);
                     if( !timeoutID )
                         timeoutID = setTimeout(()=>
                         {   applySlices();
                             timeoutID =0;
-                        },10);
+                        },1);
                 };
                 const transform = this.transform = ()=>
                 {   if(this.#inTransform){ debugger }
@@ -619,20 +642,58 @@ CustomElement extends HTMLElement
                         }
                     })
 
-                    forEach$( this,'[slice]', el =>
+                    forEach$( this,'[slice],[slice-event]', el =>
                     {   if( !el.dceInitialized )
                         {   el.dceInitialized = 1;
-                            const evs = attr(el,'slice-event');
-                            (evs || 'change')
-                                .split(' ')
+                            let evs = attr(el,'slice-event');
+                            if( attr(el,'custom-validity') )
+                                evs += ' change submit';
+
+                            [...new Set((evs || 'change') .split(' '))]
                                 .forEach( t=> (el.localName==='slice'? el.parentElement : el)
-                                                .addEventListener( t, ev=>
-                                                {   ev.sliceElement = el;
-                                                    this.onSlice(ev)
-                                                } ));
+                                    .addEventListener( t, ev=>
+                                    {   ev.sliceElement = el;
+                                        ev.sliceEventSource = ev.currentTarget || ev.target;
+                                        const slices = event2slice( sliceRoot, attr( ev.sliceElement, 'slice'), ev, this );
+
+                                        forEach$(this,'[custom-validity]',el =>
+                                        {   if( !el.setCustomValidity )
+                                                return;
+                                            const x = attr( el, 'custom-validity' );
+                                            try
+                                            {   const v = x && xPath( x, attrsRoot );
+                                                el.setCustomValidity( v === true? '': v === false ? 'invalid' : v );
+                                            }catch(err)
+                                                { console.error(err, 'xPath', x) }
+                                        })
+                                        const x = attr(el,'custom-validity')
+                                        ,     v = x && xPath( x, attrsRoot )
+                                        ,   msg = v === true? '' : v;
+
+                                        if( x )
+                                        {   el.setCustomValidity ? el.setCustomValidity( msg ) : ( el.validationMessage = msg );
+                                            slices.map( s => s.setAttribute('validation-message', msg ) );
+                                            if( ev.type === 'submit' )
+                                            {   if( v === true )
+                                                    return;
+                                                setTimeout(transform,1)
+                                                if( !!v === v )
+                                                {   v || ev.preventDefault();
+                                                    return v;
+                                                }
+                                                if( v )
+                                                {   ev.preventDefault();
+                                                    return !1
+                                                }
+                                                return ;
+                                            }else
+                                                setTimeout(transform,1)
+                                        }
+                                        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 })
+                                    this.onSlice({type:'init', target: el, sliceElement:el, sliceEventSource:el })
                                 else
                                     el.value = sliceXPath( attr(el,'slice') )
                             }

package/demo/a.html

@@ -1,63 +1,60 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-      xmlns:html="http://www.w3.org/1999/xhtml">
+<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>custom-element Declarative Custom Element implementation demo</title>
+    <title>Data slices - 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="../local-storage.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;
+        label {
+            display: flex;
         }
 
-        td, th {
-            text-align: right;
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
         }
 
-        caption {
-            padding: 1rem;
-            font-weight: bolder;
-            font-family: sans-serif;
+        nav {
+            max-width: 32em;
         }
     </style>
+    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
+         todo: apply setCustomValidity( warningStr )
+    -->
+
 </head>
 <body>
 
-
-    <custom-element tag="dce-1">
-        <template >
-            <style >
-                color:red;
-            </style>
-
-            <u ><slot>red</slot></u>
+<fieldset>
+    <legend><b style="color:green">green</b> in instance style can be overridden in payload as <i
+            style="color:red">red</i> in 1st instance
+    </legend>
+    <custom-element tag="dce-3">
+        <template>
+            <u>
+                <slot>is green</slot>
+            </u>
         </template>
+        <style>dce-3 {
+            color: green
+        }</style>
     </custom-element>
-<dce-1></dce-1> *
-<dce-1><template >
-            <style >
-                color:green;
-            </style>
-
-            <u >green</u>
-        </template></dce-1>
+   <u>should be</u> <i style="color:red">red</i>:
+    <dce-3 id="dce32">
+        <template>
+            <style> color:red; </style>
+            <u>red</u>
+        </template>
+    </dce-3> <br/>
+    should be GREEN:
+    <dce-3 id="dce31">green</dce-3>
+</fieldset>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
 </body>
 </html>

package/demo/b.html

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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"><u data-dce-id="2" xmlns="">
+    <dce-text data-dce-id="3">
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:style xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="" title="ABC">
+            dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }
+        </xhtml:style>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:u xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="">red</xhtml:u>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+    </dce-text>
+</u></dce-root>

package/demo/data-slices.html

@@ -178,6 +178,38 @@
     </template>
 </html-demo-element>
 
+
+<html-demo-element legend="10. multiple slices by same field"
+                   description="same element value sets s1 and s2 slice">
+    <template>
+        <custom-element>
+        <template>
+            <input  slice="s1|s2"
+                    slice-event="input"
+                    data-testid="f1"
+                    /><br/>
+            Type to update s1 and s2 slices <br/>
+            slice <code>s1: {//slice/s1}</code><br/>
+            slice <code>s2: {//slice/s2}</code><br/>
+        </template>
+    </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="11. slices and attribute"
+                   description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
+    <template>
+        <custom-element>
+            <template>
+                <attribute name="emotion">😃</attribute>
+                <input slice="/datadom/attributes/emotion | s1"/>
+                Type and unfocus to update emotion attribute: {emotion}
+                and slice: {//slice/s1}
+            </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/form.html

@@ -0,0 +1,240 @@
+<!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>Forms - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+
+    <script type="module" src="../local-storage.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+
+        label {
+            display: flex;
+        }
+
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
+        }
+
+        nav {
+            max-width: 32em;
+        }
+    </style>
+    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
+         todo: apply setCustomValidity( warningStr )
+    -->
+
+</head>
+<body>
+
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+
+    <p> <b>formData</b><br/>
+        The values of named form fields are populated into the <b>slice</b> as <b>form-data</b> on <var>change</var>
+        or <var>submit</var> event. The field values can be used in form validation via <var>custom-validity</var>
+        attribute
+        and in condition to enabling the form parts
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">formData MDN</a>
+    </p>
+    <details>
+        <summary>slice to form-data mapping</summary>
+        <html-demo-element>
+            <template>
+                <datadom hidden>
+                    <slice>
+                        <signin-form>
+                            <form-data>
+                                <username>QWE</username>
+                                <password>ASD</password>
+                            </form-data>
+                        </signin-form>
+                    </slice>
+                </datadom>
+            </template>
+        </html-demo-element>
+    </details>
+
+
+    <p> <b> custom-validity attribute </b><br/>
+        applied on the form itself or on the form field.<br/>
+        The value is an XPath over DCE <var>datadom</var>. When evaluated as <u>boolean</u>, it would enable(true) or
+        disable(false)
+        the form submission, acting as form validation mechanism.<br>
+        Alternatively, the value can be evaluated as a <u>string</u> which would be treated as an error and can be used
+        as
+        validation error message set as <var>@validation-message</var> attribute on the form slice.
+        Look for <var>email-form/@validation-message</var> example on the page.<br/>
+    </p>
+    <p> When <var>custom-validity</var> attribute is set on the field, its XPath evaluated value is propagated to
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage">
+            validationMessage property</a>. Which would be shown via browser system popup as the field validation error.
+    </p>
+    <p> <var>@validation-message</var> is set either by <var>custom-validity</var> attribute or by browser as system message.
+        By default, it is shown as popup on the field validation. But also is available for template as a string via
+        form field attribute. Like in <var>email-form/@validation-message</var>.
+
+    </p>
+
+    <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form Validation MDN</a>
+</nav>
+
+<html-demo-element legend="1. Simple validation"
+                   description="custom-validity boolean value prevents submission, username length switches Next to 'Sign In' button  ">
+    <ol>
+        <li> Click Next, observe the warning</li>
+        <li> Fill input with 10+ characters</li>
+        <li> Click Next, the password and "Sign In" button should appear</li>
+    </ol>
+    <template>
+        <custom-element>
+            <template>
+                <form slice="signin-form"
+                      custom-validity="
+                            string-length(/datadom/slice/signin-form/form-data/username) &gt; 10
+                            and string-length(//form-data/password) &gt; 3 "
+                >
+                    <label> Email
+                        <input name="username" autocomplete="username" placeholder="Email, phone, or username"
+                               required="">
+                    </label>
+                    <variable name="showpassword" select="string-length(//form-data/username) &gt; 10 "></variable>
+                    <if test="not($showpassword)">
+                        <button slice="confirm" slice-event="click" slice-value="'password'">Next</button>
+                    </if>
+                    <if test="$showpassword">
+                        <label>Enter password: <input name="password" type="password" required> </label>
+                        <button>Sign In</button>
+                    </if>
+                    username {//username}
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2. Form life cycle demo"
+                   description="form-data in the form slice is the source of truth">
+
+    <template>
+        <custom-element>
+            <template>
+                <form slice="signin-form"
+                      custom-validity="
+                            string-length(/datadom/slice/signin-form/form-data/username) &gt; 9
+                            and (   ( //confirm-by = 'sms' )
+                                    or ( //confirm-by = 'email' )
+                                    or ( //confirm-by = 'password' and string-length(//form-data/password) &gt; 3 )
+                                )
+                        "
+                >
+                    <!-- form validity should be based on form-data -->
+                    <variable name="warn">
+                        <if test="string-length(//username-slice) &lt; 9 ">
+                            Should be 10 or more symbols. &nbsp;
+                            <!-- updated by slice on input event -->
+                        </if>
+                        <if test="//form-data/confirm-by = 'sms'">
+                            Message and Data Rates may apply.
+                            <!-- updated by form change by radio select -->
+                        </if>
+                    </variable>
+                    <label> Enter your email, phone, or user name
+                        <input name="username" autocomplete="username"
+                               placeholder="Email, phone, or username"
+                               custom-validity="( string-length(//username-slice) &gt; 9 ) ?? 'should be 10+ symbols'"
+                               slice-event="input"
+                               slice="username-slice"
+                               required
+                        />
+                    </label>
+                    <var> {$warn} </var>
+                    <fieldset>
+                        <legend>Confirm by</legend>
+                        <label><input type="radio" name="confirm-by" value="email"/> email </label>
+                        <label><input type="radio" name="confirm-by" value="sms"/> text to phone </label>
+                        <label><input type="radio" name="confirm-by" value="password"/> password </label>
+                        <if test="/datadom/slice/signin-form/form-data/confirm-by = 'password'">
+                            <label>Enter password: <input type="password" NAME="password"
+                                                          custom-validity="( string-length(//form-data/password) &gt; 3 ) ?? 'password is too short'"
+                            /></label>
+                        </if>
+                        <if test="not(//confirm-by)">
+                            Please select the auth method
+                        </if>
+                    </fieldset>
+                    <section>
+                        <button>Sign In</button>
+                    </section>
+                </form>
+                //username-slice {//username-slice}<br/>
+                //username {//username}<br/>
+                //confirm-by {//confirm-by}<br/>
+                //password {//password}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. read system validity message"
+                   description="validationMessage propagated into slice as 'validation-message' attribute ">
+    <ol>
+        <li> type in input field</li>
+        <li> delete input field content</li>
+        <li> observe the warning in string bellow input</li>
+        <li> Click Next observe the system warning in dropdown and in string bellow input</li>
+    </ol>
+    <template>
+        <custom-element>
+            <template>
+                <form slice="email-form">
+                    <label> Email
+                        <input slice="username" slice-event="input" placeholder="non-empty" required>
+                    </label>
+                    <if test="//username/@validation-message">
+                        <var>{//username/@validation-message}</var>
+                    </if>
+                    <button>Next</button>
+                    <p>{//email-form/@validation-message}</p>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="4. form validity message"
+                   description="@validation-message propagated into form slice and  ">
+    <ol>
+        <li> type up to 3 chars in input field</li>
+        <li> observe the slice value change</li>
+        <li> click next</li>
+        <li> observe the warning bellow the button</li>
+    </ol>
+    <template>
+        <custom-element>
+            <template>
+                <form slice="email-form"
+                      custom-validity=" string-length(//slice/username) &gt; 3 ??
+                        concat('should be more than 3 characters, now is ',string-length(//slice/username) ) "
+                >
+                    <label> Email
+                        <input name="email" slice="username" slice-event="input" placeholder="non-empty" required/>
+                    </label>
+                    <if test="//username/@validation-message">
+                        <var>{//username/@validation-message}</var>
+                    </if>
+                    <button>Next</button>
+                    <p>//email-form/@validation-message: {//email-form/@validation-message} </p>
+                    <p>//slice/username: {//slice/username} </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>
+</html>

package/demo/s.xml

@@ -1,14 +1,11 @@
-<div xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><!-- wrapping into template to prevent images loading within DCE declaration -->
-    <local-storage key="undefined" slice="s" }=""></local-storage>
-
-    <input placeholder="value for localStorage" slice="s" value="{ //s ?? 'undefined' }" />
-    <button>set</button>
-    <button slice="sv" slice-value="''" slice-event="click">set blank</button>
-    <button slice="sv" slice-value="'/reflect'" slice-event="click">/reflect</button>
-    <button slice="sv" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>
-    <button slice="sv" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>
-    <br />
-    <var>undefined</var>:<code>{ //slice/s }</code>
-    <br />
-    undefined
-</div>
+<?xml version="1.0" encoding="UTF-8"?>
+<datadom>
+    <slice>
+        <signin-form>
+            <form-data>
+                <username>QWE</username>
+                <password>ASD</password>
+            </form-data>
+        </signin-form>
+    </slice>
+</datadom>

package/demo/s.xslt

@@ -1,3 +1,4 @@
+<?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,56 +15,39 @@
     </xsl:template>
     <xsl:template mode="payload" match="attributes">
         <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <http-request xmlns="" url="{concat(//s , '') }" slice="s" data-dce-id="2"/>
-            <p xmlns="" data-dce-id="3">Pokemon Count:
-                <xsl:value-of select="count(/datadom/slice/s//results)"/>
-            </p>
-            <xsl:if xmlns:xsl="http://www.w3.org/1999/XSL/Transform" test="count(/datadom/slice/s//results) &lt; 0">
-                <h3 xmlns="" data-dce-id="4">loading...</h3>
-            </xsl:if>
-            <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="/datadom/slice/s//results">
-                <xsl:variable name="pokeid"
-                              select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"/>
-                <button xmlns="" data-dce-id="5">
-                    <xsl:value-of select="@name">
-                    </xsl:value-of>
-                </button>
-            </xsl:for-each>
-            <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="//slice/s/value/*">
-                <ul xmlns="" data-dce-id="6">
-                    <var data-testid="request-section" data-dce-id="7">
-                        <dce-text data-dce-id="8">
-                            <xsl:value-of select="name(.)"/>
-                        </dce-text>
-                    </var>
-                    <xsl:for-each select="@*">
-                        <div data-dce-id="9">
-                            <var data-dce-id="10">@<xsl:value-of select="local-name(.)"/>
-                            </var>
-                            <dce-text data-dce-id="11">
-                                =
-                            </dce-text>
-                            <code data-testid="attr-{local-name(.)}" data-dce-id="12">
-                                <xsl:value-of select="."/>
-                            </code>
-                        </div>
-                    </xsl:for-each>
-                </ul>
-            </xsl:for-each>
+            <u xmlns="" data-dce-id="2">
+                <dce-text data-dce-id="3">
+                    <xsl:call-template name="slot">
+                        <xsl:with-param name="slotname" select="''"/>
+                        <xsl:with-param name="defaultvalue">
+                            <dce-text xmlns="" data-dce-id="4">is green</dce-text>
+                        </xsl:with-param>
+                    </xsl:call-template>
+                </dce-text>
+            </u>
         </dce-root>
     </xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
+
+    <xsl:template match="@*|node()" mode="copy-html">
+      <xsl:copy><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:copy>
+    </xsl:template>
+    <xsl:template match="node()[starts-with(name(),'xhtml:')]" mode="copy-html">
+      <xsl:element name="{local-name()}"><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:element>
+    </xsl:template>
+
+
     <xsl:template name="slot">
         <xsl:param name="slotname"/>
         <xsl:param name="defaultvalue"/>
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+                <xsl:apply-templates mode="copy-html" select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
-                <xsl:copy-of select="$defaultvalue"/>
+                <xsl:apply-templates mode="copy-html" select="$defaultvalue"/>
             </xsl:otherwise>
         </xsl:choose>
     </xsl:template>

package/demo/s1.xslt

@@ -0,0 +1,60 @@
+<?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: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">
+        <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
+            <u xmlns="" data-dce-id="2">
+                <dce-text data-dce-id="3">
+                    <xsl:call-template name="slot">
+                        <xsl:with-param name="slotname" select="''"/>
+                        <xsl:with-param name="defaultvalue">
+                            <dce-text xmlns="" data-dce-id="4">is green</dce-text>
+                        </xsl:with-param>
+                    </xsl:call-template>
+                </dce-text>
+            </u>
+        </dce-root>
+    </xsl:template>
+    <xsl:template match="/">
+        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    </xsl:template>
+
+    <xsl:template match="@*|node()" mode="copy-html">
+      <xsl:copy><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:copy>
+    </xsl:template>
+    <xsl:template match="node()[starts-with(name(),'xhtml:')]" mode="copy-html">
+      <xsl:element name="{local-name()}"><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:element>
+    </xsl:template>
+
+
+    <xsl:template name="slot">
+        <xsl:param name="slotname"/>
+        <xsl:param name="defaultvalue"/>
+        <xsl:choose>
+            <xsl:when test="//payload/*[@slot=$slotname]">
+                <xsl:apply-templates mode="copy-html" select="//payload/*[@slot=$slotname]"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:apply-templates mode="copy-html" select="$defaultvalue"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+    <xsl:variable name="js-injected-body">
+        <xsl:call-template name="slot">
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template>
+    </xsl:variable>
+</xsl:stylesheet>

package/ide/customData-dce.json

@@ -27,6 +27,19 @@
         }
       ]
     },
+    {
+      "name": "custom-validity",
+      "description": {
+        "kind": "markdown",
+        "value": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission."
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
+        }
+      ]
+    },
     {
       "name": "slice-value",
       "description": {
@@ -109,4 +122,4 @@
       ]
     }
   ]
-}
+}

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.21",
+  "version": "0.0.23",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -17,6 +17,11 @@
           "description": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event",
           "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
         },
+        {
+          "name": "custom-validity",
+          "description": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission.",
+          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
+        },
         {
           "name": "slice-value",
           "description": "XPath expression to populate into the slice",

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.21",
+    "version": "0.0.23",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/index.html

@@ -35,6 +35,7 @@
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
         <a href="./demo/parameters.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>
     </section>
 </nav>

package/package.json

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