npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.31 → 0.0.32 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/public/demo/a.html CHANGED Viewed

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<html lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>Data slices - Declarative Custom Element implementation demo</title>
+    <title>http-request Declarative Custom Element implementation demo</title>
     <link rel="icon" href="./wc-square.svg"/>
     <script type="module" src="../http-request.js"></script>
@@ -10,51 +10,64 @@
     <style>
         @import "./demo.css";
-        label {
-            display: flex;
+        button {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            flex: auto;
+            box-shadow: inset silver 0 0 1rem;
+            min-width: 12rem;
+            padding: 1rem;
+            color: coral;
+            text-shadow: 1px 1px silver;
+            font-weight: bolder;
         }
-        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
-            flex-direction: column;
+        button img {
+            max-height: 10vw;
+            min-height: 4rem;
         }
-        nav {
-            max-width: 32em;
+        table {
+            min-width: 16rem;
+        }
+        td {
+            border-bottom: 1px solid silver;
+        }
+        tfoot td {
+            border-bottom: none;
+        }
+        td, th {
+            text-align: right;
         }
-    </style>
-    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
-         todo: apply setCustomValidity( warningStr )
-    -->
+        caption {
+            padding: 1rem;
+            font-weight: bolder;
+            font-family: sans-serif;
+        }
+        code {
+            text-align: right;
+            min-width: 3rem;
+        }
+        svg {
+            max-height: 3rem;
+        }
+    </style>
 </head>
 <body>
-<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>
-   <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>
+        <custom-element src="./html-template.html#dwc-logo">
+            <template><i>loading SVG from templates file ...</i></template>
+        </custom-element>
 </body>
 </html>

package/public/demo/data-slices.html CHANGED Viewed

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

package/public/demo/external-template.html CHANGED Viewed

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

package/public/demo/form.html CHANGED Viewed

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

package/public/demo/hex-grid-dce.html CHANGED Viewed

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

package/public/demo/hex-grid.html CHANGED Viewed

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

package/public/demo/parameters.html CHANGED Viewed

@@ -44,7 +44,7 @@ params needed to declare DCE attributes and track the attributes changes. It als
     </template>
 </html-demo-element>
-<html-demo-element legend="slice propagates attribute" description="
+<html-demo-element legend="attribute from slice" description="
 when slice value points to attribute, it would be populated on slice change
 ">
     Type in the input field to see the variable $title change. <br/>
@@ -62,6 +62,25 @@ when slice value points to attribute, it would be populated on slice change
     </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>

package/public/demo/s.xml CHANGED Viewed

@@ -1,18 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <datadom>
-    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="4" slot="">link 1</a>
-        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="5" slot="">link 2</a>
-        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="6" slot="">link 3</a>
-    </payload>
+    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"/>
     <attributes>
-        <xmlns/>
-        <justify>end</justify>
-        <data-dce-id>2</data-dce-id>
-        <direction>row</direction>
+        <id>dce1</id>
+        <p1>default_P1</p1>
+        <p2>always_p2</p2>
+        <p3></p3>
     </attributes>
-    <dataset>
-        <dceId>2</dceId>
-    </dataset>
+    <dataset/>
     <slice/>
 </datadom>

package/public/demo/s.xslt CHANGED Viewed

@@ -1,20 +1,69 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0" exclude-result-prefixes="exsl">
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
+                exclude-result-prefixes="exsl">
     <xsl:template match="ignore">
         <xsl:choose>
-            <xsl:when test="//attr"><xsl:value-of select="//attr"/></xsl:when>
-            <xsl:otherwise><xsl:value-of select="def"/></xsl:otherwise>
-        </xsl:choose><xsl:value-of select="."/></xsl:template>
-    <xsl:template mode="payload" match="attributes"><xsl:param name="direction"><xsl:choose>
-            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
-            <xsl:otherwise><xsl:value-of select="'row'"/></xsl:otherwise>
-        </xsl:choose></xsl:param><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><xsl:attribute name="direction"><xsl:choose>
-            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
-            <xsl:otherwise><xsl:value-of select="'row'"/></xsl:otherwise>
-        </xsl:choose></xsl:attribute><xsl:call-template name="slot">
-            <xsl:with-param name="slotname" select="''"/>
-            <xsl:with-param name="defaultvalue"/>
-        </xsl:call-template></dce-root></xsl:template>
+            <xsl:when test="//attr">
+                <xsl:value-of select="//attr"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:value-of select="def"/>
+            </xsl:otherwise>
+        </xsl:choose>
+        <xsl:value-of select="."/>
+    </xsl:template>
+    <xsl:template mode="payload" match="attributes">
+        <xsl:param name="p1" select="/datadom/attributes/p1">default_P1</xsl:param>
+        <xsl:param name="p2" select="'always_p2'"/>
+        <xsl:param name="p3">
+            <xsl:choose>
+                <xsl:when test="string-length(//p3)>0 ">RRRR
+                    <xsl:value-of select="count(//p3)"/>
+                    +<xsl:value-of select="//p3 "/>=
+                </xsl:when>
+                <xsl:otherwise>OOO
+                    <xsl:value-of select=" 'def_P3' "/>
+                </xsl:otherwise>
+            </xsl:choose>
+        </xsl:param>
+        <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
+            <xsl:attribute name="p1">default_P1</xsl:attribute>
+            <xsl:attribute name="p2">
+                <xsl:value-of select="'always_p2'"/>
+            </xsl:attribute>
+            <xsl:attribute name="p3">
+                <xsl:choose>
+                    <xsl:when test="//p3 ">
+                        <xsl:value-of select="//p3 "/>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        <xsl:value-of select=" 'def_P3' "/>
+                    </xsl:otherwise>
+                </xsl:choose>
+            </xsl:attribute>
+            <dce-text xmlns="" data-dce-id="2">
+                p1:
+            </dce-text>
+            <code xmlns="" data-testid="p1" data-dce-id="3">
+                <xsl:value-of select="$p1"/>
+            </code>
+            <br xmlns="" data-dce-id="4"/>
+            <dce-text xmlns="" data-dce-id="5">
+                p2:
+            </dce-text>
+            <code xmlns="" data-testid="p2" data-dce-id="6">
+                <xsl:value-of select="$p2"/>
+            </code>
+            <br xmlns="" data-dce-id="7"/>
+            <dce-text xmlns="" data-dce-id="8">
+                p3:
+            </dce-text>
+            <code xmlns="" data-testid="p3" data-dce-id="9">
+                <xsl:value-of select="$p3"/>
+            </code>
+        </dce-root>
+    </xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
@@ -23,7 +72,7 @@
         <xsl:param name="defaultvalue"/>
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
                 <xsl:copy-of select="$defaultvalue"/>

package/public/demo/ss.html CHANGED Viewed

@@ -1,24 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<dce-root data-dce-id="1" label="Number" name="" placeholder="Enter the numeric value" type="text" value=""
-          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
-          xmlns:xhtml="http://www.w3.org/1999/xhtml"><pre data-dce-id="2" xmlns="">                //focused
-                //suggest
-                //selected
-                $selected-value </pre>
-    <label data-dce-id="3">
-        <dce-text data-dce-id="4">Number</dce-text>
-        <input data-dce-id="5" name="" placeholder="Enter the numeric value" type="text" value="">
-        <slice data-dce-id="6" name="focused" slice-event="focus" slice-value="1"/>
-        <slice data-dce-id="7" name="selected" slice-event="input"/>
-        </input></label>
-    <fieldset data-dce-id="8" form="cem-autocomplete-form" xmlns=""><label data-dce-id="9" value="one"><input
-            data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input" type="radio" value="one"/>
-        <dce-text data-dce-id="11">One</dce-text>
-    </label><label data-dce-id="9" value="two"><input data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input"
-                                                      type="radio" value="two"/>
-        <dce-text data-dce-id="11">Two</dce-text>
-    </label><label data-dce-id="9" value="three"><input data-dce-id="10" name="cem-autocomplete" slice="suggest"
-                                                        slice-event="input" type="radio" value="three"/>
-        <dce-text data-dce-id="11">Three</dce-text>
-    </label></fieldset>
-</dce-root>
+<dce-root data-dce-id="1" value="123"
+          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml"><label data-dce-id="2">
+    <dce-text data-dce-id="3"/>
+    <input data-dce-id="4" slice="selected" slice-event="input" value="123"/></label></dce-root>

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

@@ -15,6 +15,7 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
 ,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
 ,   isValidTagName = tag=> ( /^[_a-zA-Z][-_:a-zA-Z0-9]*$/ .test(tag) )
+,   mix = (o,kv) => { Object.keys(kv).map(k=> o[k] = kv[k] ) ; return o}
 ,   create = ( tag, t = '', d=document ) =>
 {
     const create = tag => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
@@ -29,11 +30,13 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 {   const px = p.ownerDocument.createElementNS(p.namespaceURI,tag);
     for( let a of p.attributes)
         px.setAttribute(a.name, a.value);
-    while( p.firstChild )
-        px.append(p.firstChild);
+    for( let c of p.childNodes )
+        px.append(c.cloneNode(true));
     return px;
 };
+export {cloneAs,mix};
     function
 ASSERT(x)
 {
@@ -149,8 +152,13 @@ tagUid( node )
     export function
 createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 {
+    const declaredAttributes = []
+    , hardcodedAttributes = {}
+    , exposedAttributes={};
     if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
-        return tagUid(templateNode)
+        return tagUid(mix( templateNode, { declaredAttributes, hardcodedAttributes, exposedAttributes } ));
     const sanitizeXsl = xml2dom(`<xsl:stylesheet version="1.0" xmlns:xsl="${ XSL_NS_URL }" xmlns:xhtml="${ HTML_NS_URL }" xmlns:exsl="${EXSL_NS_URL}" exclude-result-prefixes="exsl" >
     <xsl:output method="xml"/>
         <xsl:template match="/"><dce-root xmlns="${ HTML_NS_URL }"><xsl:apply-templates select="*" /></dce-root></xsl:template>
@@ -198,9 +206,9 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     </xsl:template>
     <xsl:template mode="sanitize" match="xhtml:input">
         <xsl:element name="{local-name()}">
-            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+            <xsl:apply-templates mode="sanitize" select="*[not(name()='slice')]|@*|text()"/>
         </xsl:element>
-        <xsl:for-each select="*">
+        <xsl:for-each select="slice">
             <xsl:copy>
                 <xsl:attribute name="for" >^</xsl:attribute>
                 <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
@@ -285,35 +293,45 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         [...fr.childNodes].forEach(n=>r.append(n));
         fr.append(r)
     }
-    const params = [];
     [...fr.querySelectorAll('dce-root>attribute')].forEach( a=>
     {
         keepAttributes(a,'namespace,name,select');
         const p = cloneAs(a,'xsl:param')
         ,  name = attr(a,'name');
+        declaredAttributes.push(name);
+        if( a.childNodes.length)
+            hardcodedAttributes[name] = a.textContent;
         payload.append(p);
-        keepAttributes(p,'select,name');
-        let select = attr(p,'select')?.split('??')
-        if( !select)
-        {   select = ['//'+name, `'${p.textContent}'`];
-            emptyNode(p);
-            p.setAttribute('name',name);
-        }
-        let val;
-        if( select?.length>1 )
-        {   p.removeAttribute('select');
-            const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
-            emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
-            emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
-            c.firstElementChild.setAttribute('test',select[0]);
-            p.append(c);
-            val = c.cloneNode(true);
+        if( a.hasAttribute('select') )
+        {
+            exposedAttributes[ name ] = attr( a, 'select' );
+            keepAttributes( p, 'select,name' );
+            let select = attr(a,'select').split('??');
+            let val;
+            if( select?.length>1 )
+            {   p.removeAttribute('select');
+                const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
+                // todo multiple ?? operators
+                emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
+                emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
+                c.firstElementChild.setAttribute('test','string-length('+select[0]+')');
+                p.append(c);
+                val = c.cloneNode(true);
+            }else
+                val = cloneAs(a,'xsl:value-of');
+            val.removeAttribute('name');
+            a.append(val);
+            a.removeAttribute('select');
         }else
-            val=cloneAs(a,'xsl:value-of');
-        val.removeAttribute('name');
-        a.append(val);
-        a.removeAttribute('select');
-        params.push(p)
+        {   keepAttributes( p, 'name' );
+            p.setAttribute('select','/datadom/attributes/'+name)
+        }
     });
     [...fr.querySelectorAll('[value]')].filter(el=>el.getAttribute('value').match( /\{(.*)\?\?(.*)\}/g )).forEach(el=>
     {   const v = attr(el,'value');
@@ -338,8 +356,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
-    const ret = tagUid(xslDom)
-    ret.params = params;
+    const ret = tagUid(xslDom);
+    mix( ret, { declaredAttributes, hardcodedAttributes, exposedAttributes } );
     return ret;
 }
     export async function
@@ -494,10 +512,12 @@ const loadTemplateRoots = async ( src, dce )=>
 }
 export function mergeAttr( from, to )
 {   for( let a of from.attributes)
-    {   a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
-        if( a.name === 'value')
-            to.value = a.value
-    }
+        try
+        {   a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
+            if( a.name === 'value')
+                to.value = a.value
+        }catch(e)
+            { console.warn('attribute assignment error',e?.message || e); }
 }
 export function assureUnique(n, id=0)
 {
@@ -530,7 +550,7 @@ export function appendByDceId(parent,e,k)
 }
 export function merge( parent, fromArr )
 {
-    if( 'dce-root' === parent.firstElementChild?.localName && 'dce-root' !== fromArr[0].localName)
+    if( 'dce-root' === parent.firstElementChild?.localName && 'dce-root' !== fromArr[0]?.localName)
         return;
     if( !fromArr.length )
         return 'dce-root' !== parent.firstElementChild?.localName && removeChildren(parent);
@@ -658,12 +678,13 @@ CustomElement extends HTMLElement
         , sliceNames = sliceNodes.map(e=>attr(e,'slice'))
                                 .filter(n=>!n.includes('/'))
                                 .filter((v, i, a)=>a.indexOf(v) === i)
-                                .map(splitSliceNames).flat()
-        , declaredAttributes = templateDocs.reduce( (ret,t) => { if( t.params ) ret.push( ...t.params ); return ret; }, [] );
+                                .map(splitSliceNames).flat();
+        const { declaredAttributes, hardcodedAttributes, exposedAttributes } = templateDocs[0];
         class DceElement extends HTMLElement
         {
-            static get observedAttributes(){ return declaredAttributes.map( a=>attr(a,'name')); }
+            static get observedAttributes(){ return declaredAttributes; }
             #inTransform = 0;
             connectedCallback()
             {   let payload = sanitizeBlankText(this.childNodes);
@@ -696,7 +717,11 @@ CustomElement extends HTMLElement
                 xslNs(payloadNode);
                 xslHtmlNs(payloadNode);
                 this.innerHTML='';
-                const attrsRoot = injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
+                const attrsRoot = injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) )
+                , inAttrs = a=> this.hasAttribute(a) || [...attrsRoot.children].find(e=>e.localName === a);
+                Object.keys(hardcodedAttributes).map(a=> inAttrs(a) || attrsRoot.append(createXmlNode(a,hardcodedAttributes[a])) );
+                declaredAttributes.map(a=> inAttrs(a) || attrsRoot.append(createXmlNode(a)) );
                 injectData( x, 'dataset', Object.keys( this.dataset ), k => createXmlNode( k, this.dataset[ k ] ) );
                 const sliceRoot = injectData( x, 'slice', sliceNames, k => createXmlNode( k, '' ) )
                 ,     sliceXPath = x => xPath(x, sliceRoot);
@@ -742,13 +767,20 @@ CustomElement extends HTMLElement
                         merge( this, f.childNodes )
                     })
-                    DceElement.observedAttributes.map( a =>
+                    Object.entries(hardcodedAttributes).map(( [a,v] )=>
+                    {   if( !this.hasAttribute(a) && v !== attr(this,a) )
+                        {   this.setAttribute( a, v );
+                            this.#applyAttribute( a, v );
+                        }
+                    });
+                    Object.keys(exposedAttributes).map( a =>
                     {   let v = attr(this.firstElementChild,a);
                         if( v !== attr(this,a) )
                         {   this.setAttribute( a, v );
                             this.#applyAttribute( a, v );
                         }
-                    })
+                    });
                     function getSliceTarget(el)
                     {   let r = el;