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

package/dist/custom-element-BqtjrCRF.cjs

@@ -0,0 +1,97 @@
+"use strict";const Q="http://www.w3.org/1999/XSL/Transform",R="http://www.w3.org/1999/xhtml",$e="http://exslt.org/common",d=(e,s)=>e?.getAttribute?.(s),me=e=>e.nodeType===3,De=e=>typeof e=="string",ue=e=>e&&typeof e.nodeType=="number",D=(e,s)=>(e.ownerDocument||e).createTextNode(s),de=e=>{for(;e.firstChild;)e.firstChild.remove();return e},F=e=>(e.getAttributeNames().map(s=>e.removeAttribute(s)),de(e)),pe=e=>(e?.setAttribute("xmlns:xsl",Q),e),fe=e=>(e?.setAttribute("xmlns:xhtml",R),pe(e)),he=e=>/^[_a-zA-Z][-_:a-zA-Z0-9]*$/.test(e),ee=(e,s)=>(Object.keys(s).map(t=>e[t]=s[t]),e),C=(e,s="",t=document)=>{const l=n=>(o=>(s&&o.append(D(t.ownerDocument||t,s)),o))((t.ownerDocument||t).createElement(n));if(he(e))return l(e);const a=l("dce-object");return a.setAttribute("dce-object-name",e),a},te=(e,s)=>{const t=e.ownerDocument.createElementNS(e.namespaceURI,s);for(let l of e.attributes)t.setAttribute(l.name,l.value);for(let l of e.childNodes)t.append(l.cloneNode(!0));return t};function X(e){return new DOMParser().parseFromString(e,"application/xml")}function U(e){return new XMLSerializer().serializeToString(e)}function _(e,s,t,l){const a=y=>e.ownerDocument.createElement(y),o=((y,x,v)=>(x.append(v=a(y)),v))(s,e);return[...t].forEach(y=>o.append(l(y))),o}function Le(e){return e.slot||(e.setAttribute||(e=C("span",e.textContent.replaceAll(`
+`,""))),e.setAttribute("slot","")),e}function K(e,s){e.getAttributeNames().forEach(t=>s.includes(t)||e.removeAttribute(t))}const se=e=>[...e].filter(s=>!(s.nodeType===3&&s.data.trim()===""));function M(e,s,t){const l=typeof e;if(l==="string")return C(s,e,t);if(l==="number")return C(s,""+e,t);if(ue(e)){const n=C(s);return n.append(e),n}if(e instanceof Array){const n=C("array","",t);return e.map(o=>n.append(M(o,s,t))),n}if(e instanceof FormData){const n=C("form-data","",t);for(const o of e)n.append(M(o[1],o[0],t));return n}const a=C(s,"",t);for(let n in e)typeof e[n]=="function"||e[n]instanceof Window||ue(e[n])&&!(n==="data"||n==="value")||(typeof e[n]!="object"&&he(n)?a.setAttribute(n,e[n]):a.append(M(e[n],n,t)));return a}function le(e){if(z(e,"*",s=>[...s.childNodes].filter(t=>t.nodeType===3&&t.parentNode.localName!=="style"&&t.data).forEach(t=>{const l=t.data,a=l.matchAll(/{([^}]*)}/g);if(a){let n=0,o=x=>D(t,x),y=[];if([...a].forEach(x=>{x.index>n&&y.push(o(x.input.substring(n,x.index)));const v=e.querySelector("value-of").cloneNode();v.setAttribute("select",x[1]),y.push(v),n=x.index+x[0].length}),n<l.length&&y.push(o(l.substring(n,l.length))),y.length){for(let x of y)s.insertBefore(x,t);s.removeChild(t)}}})),"all"in e){let s=1;for(let t of e.all)t.setAttribute&&!t.tagName.startsWith("xsl:")&&t.setAttribute("data-dce-id",""+s++)}return e}function xe(e,s="xsl:stylesheet"){const t=[],l={},a={};if(e.tagName===s||e.documentElement?.tagName===s)return le(ee(e,{declaredAttributes:t,hardcodedAttributes:l,exposedAttributes:a}));const n=X(`<xsl:stylesheet version="1.0" xmlns:xsl="${Q}" xmlns:xhtml="${R}" xmlns:exsl="${$e}" exclude-result-prefixes="exsl" >
+    <xsl:output method="xml"/>
+        <xsl:template match="/"><dce-root xmlns="${R}"><xsl:apply-templates select="*" /></dce-root></xsl:template>
+    <xsl:template match="*[name()='template']">
+        <xsl:apply-templates mode="sanitize" select="*|text()"/>
+    </xsl:template>
+    <xsl:template match="*">
+        <xsl:apply-templates mode="sanitize" select="*|text()"/>
+    </xsl:template>
+    <xsl:template match="*[name()='svg']|*[name()='math']">
+        <xsl:apply-templates mode="sanitize" select="."/>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]">
+        <xsl:copy>
+            <xsl:apply-templates mode="sanitize" select="@*"/>
+            <xsl:value-of select="text()"></xsl:value-of>
+        </xsl:copy>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="@*"/>
+            <xsl:value-of select="text()"></xsl:value-of>
+        </xsl:element>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="*|@*">
+        <xsl:copy>
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:copy>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
+    <xsl:template mode="sanitize" match="text()">
+        <dce-text>
+            <xsl:copy/>
+        </dce-text>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']">
+        <xsl:copy>
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:copy>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xhtml:*">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:element>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xhtml:input">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="*[not(name()='slice')]|@*|text()"/>
+        </xsl:element>
+        <xsl:for-each select="slice">
+            <xsl:copy>
+                <xsl:attribute name="for" >^</xsl:attribute>
+                <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+            </xsl:copy>
+        </xsl:for-each>
+    </xsl:template>
+</xsl:stylesheet>`),o=new XSLTProcessor,y=(i=>{z(i,"custom-element",h=>{h.firstElementChild.localName==="template"&&([...h.firstElementChild.content.childNodes].forEach(b=>h.append(b)),h.firstElementChild.remove())}),z(i,"script",h=>h.remove());const r=i.content??i.firstElementChild?.content??i.body??i;we.forEach(h=>z(r,h,b=>Te(b,r)));const f=i.firstElementChild?.content||i.content,g=h=>{const b=X("<xhtml/>"),T=b.importNode(h,!0);return b.replaceChild(T,b.documentElement),T.namespaceURI===R&&!d(T,"xmlns")&&T.setAttribute("xmlns",R),fe(T)};if(f){const h=C("div");return[...f.childNodes].map(b=>h.append(b.cloneNode(!0))),g(h)}return g(i.documentElement||i.body||i)})(e),x=X(`<xsl:stylesheet version="1.0"
+        xmlns:xsl="${Q}"
+        xmlns:xhtml="${R}"
+        xmlns:dce="urn:schemas-epa-wg:dce"
+        xmlns:exsl="http://exslt.org/common"
+        exclude-result-prefixes="exsl"
+    >
+    <xsl:template match="ignore">
+        <xsl:choose>
+            <xsl:when test="//attr">{//attr}</xsl:when>
+            <xsl:otherwise>{def}</xsl:otherwise>
+        </xsl:choose><xsl:value-of select="."></xsl:value-of></xsl:template>
+    <xsl:template mode="payload"  match="attributes"></xsl:template>
+    <xsl:template match="/">
+        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    </xsl:template>
+    <xsl:template name="slot" >
+        <xsl:param name="slotname" />
+        <xsl:param name="defaultvalue" />
+        <xsl:choose>
+            <xsl:when test="//payload/*[@slot=$slotname]">
+               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:copy-of select="$defaultvalue"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+    <xsl:variable name="js-injected-body">
+        <xsl:call-template name="slot" >
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template>
+    </xsl:variable>
+</xsl:stylesheet>`);o.importStylesheet(n);const v=o.transformToFragment(y,document),u=(i,r)=>i.querySelector(r),w=u(x,'template[mode="payload"]');if(!v)return console.error("transformation error",{xml:y.outerHTML,xsl:U(n)});if(v.firstElementChild.localName!=="dce-root"){const i=v.ownerDocument.createElement("dce-root");[...v.childNodes].forEach(r=>i.append(r)),v.append(i)}[...v.querySelectorAll("[test]")].forEach(i=>{const r=d(i,"test"),f=r.replace(/hasBoolAttribute\((.*?)\)/g,(g,h,b,T,P)=>{const L=h.substring(1);return`(not($${L} = 'false') and ($${L} = '' or $${L} = '${L}' or $${L} = 'true' ))`});r!==f&&i.setAttribute("test",f)}),[...v.querySelectorAll("dce-root>attribute")].forEach(i=>{K(i,"namespace,name,select");const r=te(i,"xsl:param"),f=d(i,"name");if(t.push(f),i.childNodes.length&&(l[f]=i.textContent),w.append(r),i.hasAttribute("select")){a[f]=d(i,"select"),K(r,"select,name");let g=d(i,"select").split("??"),h;if(g?.length>1){r.removeAttribute("select");const b=u(x,'template[match="ignore"]>choose').cloneNode(!0);F(b.firstElementChild).append(D(b,"{"+g[0]+"}")),b.firstElementChild.setAttribute("test",g[0]);for(let T=1;T<g.length-1;T++){const P=b.firstElementChild.cloneNode(!0);F(P).append(D(b,"{"+g[T]+"}")),P.setAttribute("test",g[T]),b.insertBefore(P,b.lastElementChild)}F(b.lastElementChild).append(D(b,"{"+g[g.length-1]+"}")),r.append(b),h=b.cloneNode(!0)}else h=te(i,"xsl:value-of");h.removeAttribute("name"),i.append(h),i.removeAttribute("select")}else K(r,"name"),r.setAttribute("select","/datadom/attributes/"+f),l[f]||i.remove()}),[...v.querySelectorAll("[value]")].filter(i=>i.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach(i=>{const r=d(i,"value");r&&i.setAttribute("value",Ne(r))});for(const i of v.childNodes)w.append(x.importNode(i,!0));[...w.getElementsByTagName("xsl:template")].forEach(i=>w.ownerDocument.documentElement.append(i));const O=u(x,'call-template[name="slot"]'),H=i=>{const r=O.cloneNode(!0),f=d(i,"name");f&&r.firstElementChild.setAttribute("select",`'${f}'`);for(let g of i.childNodes)r.lastElementChild.append(g);return r};z(w,"slot",i=>i.parentNode.replaceChild(H(i),i));const p=le(x);return ee(p,{declaredAttributes:t,hardcodedAttributes:l,exposedAttributes:a}),p}async function be(e){return await new Promise((t,l)=>{const a=new XMLHttpRequest;a.open("GET",e),a.responseType="document",a.onload=()=>{a.readyState===a.DONE&&a.status===200?t(a.responseXML?.body||a.responseXML||C("div",a.responseText)):l(`${a.statusText} - ${e}`)},a.addEventListener("error",n=>l(n)),a.send()})}function ye(e,s,t=!1){if(e===s)return!0;if(typeof e!="object"||e===null||typeof s!="object"||s===null||Object.keys(e).length!==Object.keys(s).length)return t;for(let l in e)if(!(l in s)||!ye(e[l],s[l]))return t;return!0}const ge=e=>e.split("|").map(s=>s.trim()).filter(s=>s),Ae=(e,s)=>ge(s).map(t=>{let l=e.ownerDocument,a=n=>(e.append(n),n);if(t.includes("/")){const n=[],o=l.evaluate(t,e);for(let y;y=o.iterateNext();)n.push(y);return n}return[...e.childNodes].find(n=>n.localName===t)||a(C(t,"",l))}).flat();function ne(e,s,t,l){if(!t.sliceProcessed)return t.sliceProcessed=1,Ae(e,s??"").map(a=>{const n=e.ownerDocument,o=t.sliceEventSource,y=t.sliceElement,x=()=>[...a.childNodes].filter(u=>u.nodeType===3||u.localName==="value"||u.localName==="form-data").map(u=>u.remove());o.getAttributeNames().map(u=>a.setAttribute(u,d(o,u))),[...a.childNodes].filter(u=>u.localName==="event").map(u=>u.remove()),"validationMessage"in o&&a.setAttribute("validation-message",o.validationMessage),t.type==="init"&&x(),a.append(M(t,"event",n));const v=(o.type==="checkbox"||o.type==="radio")&&!o.checked;if(y.hasAttribute("slice-value")){o.value===void 0?a.removeAttribute("value"):a.setAttribute("value",o.value);const u=v?"":I(d(y,"slice-value"),a);x(),a.append(D(n,u))}else{if("elements"in o)return x(),a.append(M(new FormData(o),"value",a.ownerDocument)),a;const u=v?"":o.value??d(o,"value");if(x(),u==null)[...a.childNodes].filter(w=>w.localName!=="event").map(w=>w.remove()),a.removeAttribute("value");else{const w=De(u)?D(n,u):M(u,"value",a.ownerDocument);a.append(w),a.setAttribute("value",u)}}return a})}function z(e,s,t){e.querySelectorAll&&[...e.querySelectorAll(s)].forEach(t)}const je=async(e,s)=>{if(!e||!e.trim())return[s];if(e.startsWith("#"))return(t=>{const l=t.querySelectorAll(e);return[...l.length?l:t.getRootNode().querySelectorAll(e)]})(s.parentElement);try{const[t,l]=e.split("#");if(e.charAt(0)===".")e=new URL(t,s.closest("[base]")?.getAttribute("base")||location).href;else try{e=(void 0)(t),l&&(e+="#"+l)}catch(n){console.error(n.message)}const a=await be(e);if(s.setAttributeNS("xml","base",e),l){const n=a.querySelectorAll("#"+l);return n.length?[...n]:(console.error("template not found",e+"#"+l),[s])}return[a]}catch{return[s]}};function ae(e,s){for(let n of e.attributes)try{const o=n.name;if(o.startsWith("xmlns"))continue;n.namespaceURI?(!s.hasAttributeNS(n.namespaceURI,o)||s.getAttributeNS(n.namespaceURI,o)!==n.value)&&s.setAttributeNS(n.namespaceURI,o,n.value):(!s.hasAttribute(o)||s.getAttribute(o)!==n.value)&&s.setAttribute(n.name,n.value),n.name==="value"&&(s.value=n.value)}catch(o){console.warn("attribute assignment error",o?.message||o)}const t=s.dceExportedAttributes,l=s.getAttribute("dce-exported-attributes"),a=l?new Set(l.split(" ")):null;for(let n of s.getAttributeNames())!e.hasAttribute(n)&&!t?.has(n)&&!a?.has(n)&&s.removeAttribute(n)}function ie(e,s=0){const t={};for(const l of e.childNodes){const a=d(l,"data-dce-id")||l.dceId||0;if(!t[a])a?t[a]=1:(t[a]=l.dceId=++s,l.setAttribute&&l.setAttribute("data-dce-id",l.dceId));else{const n=l.dceId=a+"-"+t[a]++;l.setAttribute&&l.setAttribute("data-dce-id",n)}l.childNodes.length&&ie(l)}}function ve(e,s,t){t=1*t;for(let l of e.childNodes)if((l.dceId??l.getAttribute("data-dce-id")*1)>t)return e.insertBefore(s,l);e.append(s)}function re(e,s){if(e.firstElementChild?.localName==="dce-root"&&s[0]?.localName!=="dce-root")return;if(!s.length)return e.firstElementChild?.localName!=="dce-root"&&de(e);const t={};for(let l of e.childNodes)t[l.dceId],me(l)?(l.data.trim(),t[l.dceId||0]=l):t[d(l,"data-dce-id")||0]=l;for(let l of[...s]){const a=d(l,"data-dce-id")||l.dceId,n=t[a];n?(me(l)?n.nodeValue!==l.nodeValue&&(n.nodeValue=l.nodeValue):(ae(l,n),(n.childNodes.length||l.childNodes.length)&&re(n,l.childNodes)),delete t[a]):ve(e,l,a)}for(let l of Object.values(t))l.localName!=="dce-root"&&l.remove()}function Ee(e,s){return e.hasAttribute(s)||e.setAttribute(s,crypto.randomUUID()),e.getAttribute(s)}const Ne=e=>[...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map(t=>`${t[1]}{${W(t[3])}}${t[4]}`).join(""),W=e=>{if(!e.trim())return e;const s=e.split("??"),t=s.shift(),l=W(s.join("??"));return s.length?`concat( ${t} , substring( ${l} , (1+string-length( ${l} )) * string-length( ${t} ) ) )`:e},I=(e,s)=>{const t=e.split("??");if(t.length>1)return I(t[0],s)||I(t[1],s);e=W(e);const l=s.ownerDocument.evaluate(e,s);switch(l.resultType){case XPathResult.NUMBER_TYPE:return l.numberValue;case XPathResult.STRING_TYPE:return l.stringValue;case XPathResult.BOOLEAN_TYPE:return l.booleanValue}let a="";for(let n;n=l.iterateNext();)a+=n.textContent;return a},we="stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback".split(","),Te=(e,s)=>{const t=C("xsl:"+e.localName);for(let a of e.attributes)t.setAttribute(a.name,a.value);for(;e.firstChild;)t.append(e.firstChild);const l=e.localName==="if"||e.localName==="choose"?(()=>{const a=C("span");return a.append(t),a})():t;if(e.parentElement)e.parentElement.replaceChild(l,e);else{const a=e.parentElement||s,n=[...a.childNodes];n.forEach((o,y)=>{o===e&&(n[y]=l)}),a.replaceChildren(...n)}};class Se extends HTMLElement{static observedAttributes=["src","tag","hidden"];async connectedCallback(){this.firstElementChild&&this.firstElementChild.localName!=="template"&&console.log(`custom-element used without template wrapping content
+`,this.outerHTML);const s=await je(d(this,"src"),this),t=d(this,"tag"),l=t||"dce-"+crypto.randomUUID();for(const p of s)z(p.templateNode||p.content||p,"style",i=>{const r=i.closest("slot"),f=r?`slot[name="${r.name}"]`:"";i.innerHTML=`${l} ${f}{${i.innerHTML}}`,this.append(i)});const a=s.map(p=>xe(p)),n=a.map((p,i)=>{i=new XSLTProcessor;try{i.importStylesheet(p)}catch(r){console.error(r,U(p))}return i});Object.defineProperty(this,"xsltString",{get:()=>a.map(p=>U(p)).join(`
+`)});const o=this,y=[...this.templateNode.querySelectorAll("[slice]")],x=y.map(p=>d(p,"slice")).filter(p=>!p.includes("/")).filter((p,i,r)=>r.indexOf(p)===i).map(ge).flat(),{declaredAttributes:v,hardcodedAttributes:u,exposedAttributes:w}=a[0],oe=new Set([...Object.keys(u),...Object.keys(w)]);class O extends HTMLElement{static get observedAttributes(){return v}#e=0;get dceExportedAttributes(){return oe}connectedCallback(){let i=se(this.childNodes);if(this.firstElementChild?.tagName==="TEMPLATE"){this.firstElementChild!==this.lastElementChild&&console.error("payload should have TEMPLATE as only child",this.outerHTML);const c=this.firstElementChild;c.remove(),i=se(c.content.childNodes);for(const E of i)if(E.localName==="style"){const m=Ee(this,"data-dce-style");E.innerHTML=`${l}[data-dce-style="${m}"]{${E.innerHTML}}`,c.insertAdjacentElement("beforebegin",E)}else E.nodeType===1?c.insertAdjacentElement("beforebegin",E):E.nodeType===3&&c.insertAdjacentText("beforebegin",E.data)}const r=X("<datadom/>").documentElement,f=(c,E="")=>(m=>(E&&m.append(D(r,E)),m))(r.ownerDocument.createElement(c)),g=_(r,"payload",i,Le);pe(g),fe(g),this.innerHTML="";const h=_(r,"attributes",this.attributes,c=>f(c.nodeName,c.value)),b=c=>this.hasAttribute(c)||[...h.children].find(E=>E.localName===c);ae(this,h),Object.keys(u).map(c=>b(c)||h.append(f(c,u[c]))),Object.keys(w).map(c=>b(c)||h.append(f(c))),_(r,"dataset",Object.keys(this.dataset),c=>f(c,this.dataset[c]));const T=_(r,"slice",x,c=>f(c,"")),P=c=>I(c,T);this.xml=r;const L=[],ce=()=>{const c={};for(let E;E=L.pop();){const m=d(E.sliceElement,"slice");c[m]||(ne(T,m,E),c[m]=E)}Object.keys(c).length!==0&&B()};let Y;this.onSlice=c=>{L.push(c),Y||(Y=setTimeout(()=>{ce(),Y=0},1))};const B=this.transform=()=>{if(this.#e)debugger;this.#e=1;const c=()=>{n.map((A,S)=>{const V=A.transformToFragment(r.ownerDocument,document);return V||console.error(`XSLT transformation error. xsl:
+`,U(a[S]),`
+xml:
+`,U(r)),V}).map(A=>{A&&(ie(A),re(this,A.childNodes))});let N=0;return Object.entries(u).map(([A,S])=>{!this.hasAttribute(A)&&S!==d(this,A)&&(this.setAttribute(A,S),this.#t(A,S),N++)}),Object.keys(w).map(A=>{let S=d(this.firstElementChild,A);S!==d(this,A)&&(this.setAttribute(A,S),this.#t(A,S),N++)}),N};c()&&c()&&console.warn("model update should not be the result of transform more than once");function E(m){let N=m;if(m.localName==="slice"){const A=d(m,"for");if(A||(N=m.parentElement),A==="^")do N=N.previousElementSibling;while(N.localName==="slice");else N=this.querySelector(A);if(!N)return console.warn(`can not find selector in "slice for=${A}" `,m.outerHTML);d(m,"slice")||m.setAttribute("slice",d(m,"name"))}return N}z(this,"[slice],[slice-event]",m=>{let N=d(m,"slice-event");const A=m.hasAttribute("slice-value")||m.hasAttribute("value")||m.value,S=E(m);m.dceInitialized||(m.dceInitialized=1,S.hasAttribute("custom-validity")&&(N+=" change submit"),[...new Set((N||"change").split(" "))].forEach(V=>S.addEventListener(V,$=>{$.sliceElement=m,$.sliceEventSource=$.currentTarget||$.target,$.sliceProcessed=0;const Ce=ne(T,d($.sliceElement,"slice"),$);z(this,"[custom-validity]",k=>{if(!k.setCustomValidity)return;const J=d(k,"custom-validity");try{const q=J&&I(J,h);k.setCustomValidity(q===!0?"":q===!1?"invalid":q)}catch(q){console.error(q,"xPath",J)}});const G=d(S,"custom-validity"),j=G&&I(G,h),Z=j===!0?"":j;if(G){if(m.setCustomValidity?m.setCustomValidity(Z):m.validationMessage=Z,Ce.map(k=>k.setAttribute("validation-message",Z)),$.type==="submit")return j===!0?void 0:(setTimeout(B,1),!!j===j?(j||$.preventDefault(),j):j?($.preventDefault(),!1):void 0);setTimeout(B,1)}this.onSlice($)})),(!N||N.includes("init"))&&(A?this.onSlice({type:"init",target:S,sliceElement:m,sliceEventSource:S}):m.value=P(d(m,"slice"))))}),this.#e=0};B(),ce()}#t(i,r){i==="value"&&(this.value=r);const f=this.xml.querySelector("attributes");let g=this.xml.querySelector(`attributes>${i}`);g?F(g).append(D(g,r)):(g=C(i,r,this.xml),f.append(g)),this.#e||f.setAttribute(i,r),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{[i]:r}}))}attributeChangedCallback(i,r,f){!this.xml||this.#e||(this.#t(i,f),this.transform())}get dce(){return o}}const H=p=>{window.customElements.get(p)!==O&&window.customElements.define(p,O)};if(t)H(t);else{const p=l;this.setAttribute("tag",p),H(p);const i=document.createElement(p);this.getAttributeNames().forEach(r=>i.setAttribute(r,this.getAttribute(r))),i.append(...[...this.childNodes].filter(r=>r.localName!=="style")),this.append(i)}}get templateNode(){return this.firstElementChild?.tagName==="TEMPLATE"?this.firstElementChild.content:this}get dce(){return this}get xslt(){return X(this.xsltString)}}window.customElements.define("custom-element",Se);exports.CustomElement=Se;exports.appendByDceId=ve;exports.assureSlices=Ae;exports.assureUID=Ee;exports.assureUnique=ie;exports.cloneAs=te;exports.createXsltFromDom=xe;exports.deepEqual=ye;exports.evalCurly=Ne;exports.event2slice=ne;exports.merge=re;exports.mergeAttr=ae;exports.mix=ee;exports.obj2node=M;exports.sanitizeBlankText=se;exports.tagUid=le;exports.toXsl=Te;exports.xPath=I;exports.xPathDefaults=W;exports.xhrTemplate=be;exports.xml2dom=X;exports.xmlString=U;exports.xslTags=we;

package/dist/custom-element-bundle.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./custom-element-Dtzhbjkc.cjs"),l=require("./http-request-DPrY7mGh.cjs"),t=require("./local-storage-78EivJ_B.cjs"),a=require("./location-element-DRB7hCwA.cjs");exports.CustomElement=e.CustomElement;exports.appendByDceId=e.appendByDceId;exports.assureSlices=e.assureSlices;exports.assureUID=e.assureUID;exports.assureUnique=e.assureUnique;exports.cloneAs=e.cloneAs;exports.createXsltFromDom=e.createXsltFromDom;exports.deepEqual=e.deepEqual;exports.default=e.CustomElement;exports.evalCurly=e.evalCurly;exports.event2slice=e.event2slice;exports.merge=e.merge;exports.mergeAttr=e.mergeAttr;exports.mix=e.mix;exports.obj2node=e.obj2node;exports.sanitizeBlankText=e.sanitizeBlankText;exports.tagUid=e.tagUid;exports.toXsl=e.toXsl;exports.xPath=e.xPath;exports.xPathDefaults=e.xPathDefaults;exports.xhrTemplate=e.xhrTemplate;exports.xml2dom=e.xml2dom;exports.xmlString=e.xmlString;exports.xslTags=e.xslTags;exports.HttpRequestElement=l.HttpRequestElement;exports.LocalStorageElement=t.LocalStorageElement;exports.localStorageSetItem=t.localStorageSetItem;exports.localStorage_clear=t.localStorage_clear;exports.localStorage_removeItem=t.localStorage_removeItem;exports.localStorage_setItem=t.localStorage_setItem;exports.LocationElement=a.LocationElement;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./custom-element-BqtjrCRF.cjs"),l=require("./http-request-DSaowcG1.cjs"),t=require("./local-storage-78EivJ_B.cjs"),a=require("./location-element-DRB7hCwA.cjs");exports.CustomElement=e.CustomElement;exports.appendByDceId=e.appendByDceId;exports.assureSlices=e.assureSlices;exports.assureUID=e.assureUID;exports.assureUnique=e.assureUnique;exports.cloneAs=e.cloneAs;exports.createXsltFromDom=e.createXsltFromDom;exports.deepEqual=e.deepEqual;exports.default=e.CustomElement;exports.evalCurly=e.evalCurly;exports.event2slice=e.event2slice;exports.merge=e.merge;exports.mergeAttr=e.mergeAttr;exports.mix=e.mix;exports.obj2node=e.obj2node;exports.sanitizeBlankText=e.sanitizeBlankText;exports.tagUid=e.tagUid;exports.toXsl=e.toXsl;exports.xPath=e.xPath;exports.xPathDefaults=e.xPathDefaults;exports.xhrTemplate=e.xhrTemplate;exports.xml2dom=e.xml2dom;exports.xmlString=e.xmlString;exports.xslTags=e.xslTags;exports.HttpRequestElement=l.HttpRequestElement;exports.LocalStorageElement=t.LocalStorageElement;exports.localStorageSetItem=t.localStorageSetItem;exports.localStorage_clear=t.localStorage_clear;exports.localStorage_removeItem=t.localStorage_removeItem;exports.localStorage_setItem=t.localStorage_setItem;exports.LocationElement=a.LocationElement;

package/dist/custom-element-bundle.js

@@ -1,6 +1,6 @@
-import { C as e } from "./custom-element-D2wf_rqP.js";
-import { j as o, f as l, l as r, i as m, c, b as n, e as x, n as p, g, k as i, h as u, m as d, o as f, s as S, t as E, u as I, q as h, p as q, d as D, x as L, a as b, r as v } from "./custom-element-D2wf_rqP.js";
-import { H as T } from "./http-request-BOvP4KTl.js";
+import { C as e } from "./custom-element-BoYMoUtP.js";
+import { j as o, f as l, l as r, i as m, c, b as n, e as x, n as p, g, k as i, h as u, m as d, o as f, s as S, t as E, u as I, q as h, p as q, d as D, x as L, a as b, r as v } from "./custom-element-BoYMoUtP.js";
+import { H as T } from "./http-request-DTCzZ1gc.js";
 import { L as _, c as j, b as k, a as y, l as A } from "./local-storage-DzmNKzgN.js";
 import { L as H } from "./location-element-FJlONi2n.js";
 export {

package/dist/demo/a.html

@@ -63,11 +63,18 @@
 <body>
 
 
+<custom-element tag="dce-link2" >
+        <template>
 
-        <custom-element src="./html-template.html#dwc-logo">
-            <template><i>loading SVG from templates file ...</i></template>
-        </custom-element>
+            <attribute name="p3" select="//attributes/p3 ?? 'def_P3' "></attribute>
 
+            p3: <code data-testid="t3">{$p3}</code>
+        </template>
+    </custom-element>
+    <section>
+        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2>
+
+    </section>
 
 </body>
 </html>

package/dist/demo/a.svg

@@ -1,27 +1,27 @@
-<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-    <defs>
-
-    </defs>
-    <polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
-    <path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
-    <path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
-    <path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
-    <path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
-    <path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
-    <path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
-    <path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
-    <path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
-    <path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
-    <path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
-    <path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
-    <path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
-    <path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
-    <path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
-    <path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
+<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <defs>
+
+    </defs>
+    <polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
+    <path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
+    <path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
+    <path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
+    <path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
+    <path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
+    <path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
+    <path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
+    <path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
+    <path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
+    <path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
+    <path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
+    <path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
+    <path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
+    <path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
+    <path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
 </svg>

package/dist/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/dist/demo/external-templates-sb-6.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <!--
+
+    This page is part of src/stories/module-url.test.stories.ts, test #2
+
+    -->
+
+
+
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>importmap custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <style>
+        dce-root {
+            box-shadow: 0 0 0.5rem lime;
+            padding: 1rem;
+            display: inline-block;
+        }
+    </style>
+    <script type="importmap">
+        {
+          "imports": {
+            "lib-root/": "./lib-dir/",
+            "embed-lib": "./lib-dir/embed-lib.html"
+          }
+        }
+    </script>
+    <script type="module" src="../src/custom-element/location-element.js"></script>
+    <script type="module" src="../src/custom-element/module-url.js"></script>
+    <script type="module" src="../src/custom-element/custom-element.js"></script>
+</head>
+<body>
+<p>Should render formula</p>
+<custom-element src="./html-template.html#sophomores-dream">
+    <template><i>loading MathML from HTML file ...</i></template>
+</custom-element>
+
+</body>
+</html>

package/dist/demo/external-templates-sb-7.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <!--
+
+    This page is part of src/stories/module-url.test.stories.ts, test #2
+
+    -->
+
+
+
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>importmap custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <style>
+        dce-root {
+            box-shadow: 0 0 0.5rem lime;
+            padding: 1rem;
+            display: inline-block;
+        }
+    </style>
+    <script type="importmap">
+        {
+          "imports": {
+            "lib-root/": "./lib-dir/",
+            "embed-lib": "./lib-dir/embed-lib.html"
+          }
+        }
+    </script>
+    <script type="module" src="../src/custom-element/location-element.js"></script>
+    <script type="module" src="../src/custom-element/module-url.js"></script>
+    <script type="module" src="../src/custom-element/custom-element.js"></script>
+</head>
+<body>
+<p>Should render tree</p>
+ <custom-element src="./html-template.xhtml#embedded-xsl">
+    <template>whole XSLT is  embedded into HTML body</template>
+</custom-element>
+
+</body>
+</html>

package/dist/demo/html-template.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <head>
+  <meta charset="utf-8">
     <title>template based on HTML file</title>
     <style>svg {
         width: 4rem;
@@ -8,9 +9,9 @@
 </head>
 <body>
 <script>console.error('Stranger danger!')</script>
-<b id="wave">👋</b>
-<b id="ok">👌</b>
-<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
+<b id="wave" data-testid="wave" >👋</b>
+<b id="ok"   data-testid="ok"   >👌</b>
+<svg id="dwc-logo" data-testid="dwc-logo"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
     <defs>
         <style>.cls-1 {
             fill: #c2e6f1;
@@ -73,7 +74,7 @@
     <path class="cls-1"
           d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
 </svg>
-<math id="sophomores-dream" display="block">
+<math id="sophomores-dream"  data-testid="ml-test" display="block">
     <mrow>
         <msubsup>
             <mo>∫</mo>

package/dist/demo/module-url-sb-2.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <!--
+
+    This page is part of src/stories/module-url.test.stories.ts, test #2
+
+    -->
+
+
+
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>importmap custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "lib-root/": "./lib-dir/",
+            "embed-lib": "./lib-dir/embed-lib.html"
+          }
+        }
+    </script>
+    <script type="module" src="../src/custom-element/location-element.js"></script>
+    <script type="module" src="../src/custom-element/module-url.js"></script>
+    <script type="module" src="../src/custom-element/custom-element.js"></script>
+</head>
+<body>
+    <p><code>embed-lib</code> resolved to <code>./lib-dir/embed-lib.html</code> by page <i>importmap</i></p>
+        <custom-element>
+            <template>
+                <module-url slice="lib-url" src="embed-lib"></module-url>
+                <if test="//lib-url/@error">
+                    <p>error: <b>{//lib-url/@error}</b></p>
+                </if>
+                <span data-testid="check">check the link:</span>
+                <a href="{//lib-url}">
+                    <custom-element src="embed-lib#embed-lib-component">
+                        failed to load
+                    </custom-element>
+                </a>
+            </template>
+        </custom-element>
+
+</body>
+</html>

package/dist/demo/module-url-sb-4.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <!--
+
+    This page is part of src/stories/module-url.test.stories.ts, test #2
+
+    -->
+
+
+
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>importmap custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="importmap">
+        {
+          "imports": {
+            "lib-root/": "./lib-dir/",
+            "embed-lib": "./lib-dir/embed-lib.html"
+          }
+        }
+    </script>
+    <script type="module" src="../src/custom-element/location-element.js"></script>
+    <script type="module" src="../src/custom-element/module-url.js"></script>
+    <script type="module" src="../src/custom-element/custom-element.js"></script>
+</head>
+<body>
+    <p><code>lib-root</code> resolved to <code>lib-dir</code> by page <i>importmap</i></p>
+
+    <custom-element>
+        <template>
+            <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-hash"></module-url>
+            <module-url slice="img-url" src="lib-root/Smiley.svg"></module-url>
+            <if test="//lib-url/@error">
+                <p>error: <b>{//lib-url/@error}</b></p>
+            </if>
+            check the link:
+            <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-hash <img src="{//img-url}" alt=""/></a>
+            <custom-element src="lib-root/embed-lib.html#embed-relative-hash">
+                failed to load
+            </custom-element>
+
+        </template>
+    </custom-element>
+
+</body>
+</html>