@epa-wg/custom-element 0.0.11 → 0.0.13

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,22 +1,37 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="slice" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="12">
+          <list size="17">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
             <item index="3" class="java.lang.String" itemvalue="noscript" />
             <item index="4" class="java.lang.String" itemvalue="embed" />
             <item index="5" class="java.lang.String" itemvalue="script" />
-            <item index="6" class="java.lang.String" itemvalue="custom-element" />
-            <item index="7" class="java.lang.String" itemvalue="dce-external-4" />
-            <item index="8" class="java.lang.String" itemvalue="html-demo-element" />
-            <item index="9" class="java.lang.String" itemvalue="dce-external" />
-            <item index="10" class="java.lang.String" itemvalue="dce-internal" />
-            <item index="11" class="java.lang.String" itemvalue="dce-hash" />
+            <item index="6" class="java.lang.String" itemvalue="html-demo-element" />
+            <item index="7" class="java.lang.String" itemvalue="custom-element" />
+            <item index="8" class="java.lang.String" itemvalue="local-storage" />
+            <item index="9" class="java.lang.String" itemvalue="dce-1" />
+            <item index="10" class="java.lang.String" itemvalue="xhtml:table" />
+            <item index="11" class="java.lang.String" itemvalue="xhtml:tbody" />
+            <item index="12" class="java.lang.String" itemvalue="xhtml:tr" />
+            <item index="13" class="java.lang.String" itemvalue="xhtml:th" />
+            <item index="14" class="java.lang.String" itemvalue="xhtml:td" />
+            <item index="15" class="java.lang.String" itemvalue="xhtml:tfoot" />
+            <item index="16" class="java.lang.String" itemvalue="dce-2" />
           </list>
         </value>
       </option>

package/.idea/misc.xml

@@ -1,6 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
 </project>

package/.vs/VSWorkspaceState.json

@@ -0,0 +1,8 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\demo"
+  ],
+  "SelectedNode": "\\demo",
+  "PreviewInSolutionExplorer": false
+}

package/README.md

@@ -1,6 +1,6 @@
 # custom-element
 `Declarative Custom Element` is a part of pure `Declarative Web Application` stack. A proof of concept as a part of 
-[WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301) 
+[WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301) and [Declarative Web Application](https://github.com/EPA-WG/dwa#readme)
 discussion. The functionality of DCE and its data access does not require programming using JavaScript. 
 
 It allows to define custom HTML tag with template filled from slots, attributes and data `slice` as of now from  
@@ -32,13 +32,13 @@ yarn add @epa-wg/custom-element
 ## [Live demo 🔗][demo-url]
 ```html
 <custom-element tag="pokemon-tile" hidden>
-    <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
+    <h3>{title}</h3> <!-- title is an attribute in instance
                                                  mapped into /*/attributes/title -->
     <xsl:if test="//smile">                 <!-- data-smile DCE instance attribute,
                                                  mapped into /*/dataset/smile
                                                  used in condition -->
                                             <!-- data-smile DCE instance attribute, used as HTML -->
-        <div>Smile as: <xsl:value-of select='//smile'/></div>
+        <div>Smile as: {//smile} </div>
     </xsl:if>
     <!-- image would not be visible in sandbox, see live demo -->
     <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
@@ -78,6 +78,10 @@ generates HTML
 </pokemon-tile>
 ```
 
+[![responsive hex grid demo][hex-grid-image] responsive hex-grid demo][hex-grid-url]
+, look into sources for samples of CSS encapsulation and external template use.
+
+
 # Implementation notes
 ## Life cycle
 ### `custom-element` declaration
@@ -126,6 +130,44 @@ allows to refer the template withing external document
 
 
 # template syntax
+[Scoped CSS][css-demo-url] live demo
+## styles encapsulation
+DCE can have the own styles which would be scoped to the instances. 
+In order to prevent the style leaking, it has to be defined withing `template` tag:
+```html
+<custom-element>
+  <template>
+    <style>
+        color:green;
+        button{ color: blue; }
+    </style>
+    <label> green <button>blue</button> </label>
+  </template>
+</custom-element>
+```
+<fieldset>
+  <label style="color: green"> green <button style="color: blue">blue</button> </label>
+</fieldset>
+
+### override style for instance
+In same way as in DCE itself:
+```html
+        <custom-element tag="dce-2">
+            <template><!-- template needed to avoid styles leaking into global HTML -->
+                <style>
+                    button{ border: 0.2rem dashed blue; }
+                </style>
+                <button><slot>Blue borders</slot></button>
+            </template>
+        </custom-element>
+        <dce-2>dashed blue</dce-2>
+        <dce-2>
+            <template> <!-- template needed to avoid styles leaking into global HTML -->
+                <style>button{border-color:red;}</style>
+                Red border
+            </template>
+        </dce-2>
+```
 ## Attributes
 curly braces `{}` in attributes implemented as [attribute value template](https://www.w3.org/TR/xslt20/#attribute-value-templates)
 
@@ -165,21 +207,28 @@ template engine.
 
 # troubleshooting
 ## HTML parser is not compatible with templates
-On many tags like `table`, or link `a` the attempt to use XSLT operations could lead to DOM order missmatch to given 
-in template. In such cases the `html:` prefix in front of troubled tag would solve the parsing.
+On many tags like `table`, or link `a` the attempt to use XSLT operations could lead to DOM order mismatch to given 
+in template. In such cases the `xhtml:` prefix in front of troubled tag would solve the parsing.
 
 ```html
 <custom-element tag="dce-2" hidden>
-    <local-storage key="basket" slice="basket"></local-storage>
-    <html:table>
-        <xsl:for-each select="//slice/basket/@*">
-            <html:tr>
-                <html:th><xsl:value-of select="name()"/></html:th>
-                <html:td><xsl:value-of select="."/></html:td>
-            </html:tr>
-        </xsl:for-each>
-    </html:table>
-    count:<xsl:value-of select="count(//slice/basket/@*)"/>
+  <local-storage key="basket" slice="basket" live type="json"></local-storage>
+  <xhtml:table xmlns:xhtml="http://www.w3.org/1999/xhtml"  >
+    <xhtml:tbody>
+      <xsl:for-each select="//basket/@*">
+        <xhtml:tr>
+          <xhtml:th> {name()} </xhtml:th>
+          <xhtml:td> {.}      </xhtml:td>
+        </xhtml:tr>
+      </xsl:for-each>
+    </xhtml:tbody>
+    <xhtml:tfoot>
+      <xhtml:tr>
+        <xhtml:td><slot>🤔</slot></xhtml:td>
+        <xhtml:th> {sum(//slice/basket/@*)} </xhtml:th>
+      </xhtml:tr>
+    </xhtml:tfoot>
+  </xhtml:table>
 </custom-element>
 ```
 See [demo source](demo/local-storage.html) for detailed sample.
@@ -206,21 +255,24 @@ run transformation under debugger.
 * try to add as attribute you could observe and put the value of node name or text to identify the current location in data 
 within template
 ```xml
-<b title="{name(*)} : {text()}">xml tag name:<xsl:value-of select='name()'/></b>
+<b title="{name(*)} : {text()}">xml tag name: <xsl:value-of select='name()'/></b>
 ```
 
 [git-url]:        https://github.com/EPA-WG/custom-element
 [git-test-url]:   https://github.com/EPA-WG/custom-element-test
 [demo-url]:       https://unpkg.com/@epa-wg/custom-element@0.0/index.html
+[css-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/scoped-css.html
+[hex-grid-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/hex-grid.html
+[hex-grid-image]: demo/hex-grid-transform.png
 [local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
 [http-request-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
 [location-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.11/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.11/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.11/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.13/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.13/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.13/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/custom-element.js

@@ -1,27 +1,37 @@
-const XML_DECLARATION = '<?xml version="1.0" encoding="UTF-8"?>'
-,          XSL_NS_URL = 'http://www.w3.org/1999/XSL/Transform'
-,          DCE_NS_URL ="urn:schemas-epa-wg:dce";
+const XSL_NS_URL  = 'http://www.w3.org/1999/XSL/Transform'
+,     HTML_NS_URL = 'http://www.w3.org/1999/xhtml'
+,     EXSL_NS_URL = 'http://exslt.org/common'
+,     DCE_NS_URL  ="urn:schemas-epa-wg:dce";
 
 // const log = x => console.debug( new XMLSerializer().serializeToString( x ) );
 
-const attr = (el, attr)=> el.getAttribute(attr)
+const attr = (el, attr)=> el.getAttribute?.(attr)
+,   isText = e => e.nodeType === 3
 ,   create = ( tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElement( tag ))
-,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ));
+,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
+,   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) );
 
+    function
+ASSERT(x)
+{
+    // if(!x)
+    //     debugger
+}
     function
 xml2dom( xmlString )
 {
-    return new DOMParser().parseFromString( XML_DECLARATION + xmlString, "application/xml" )
+    return new DOMParser().parseFromString( xmlString, "application/xml" )
 }
     function
 xmlString(doc){ return new XMLSerializer().serializeToString( doc ) }
 
     function
 injectData( root, sectionName, arr, cb )
-{
+{   const create = ( tag ) => root.ownerDocument.createElement( tag );
     const inject = ( tag, parent, s ) =>
-    {
-        parent.append( s = createNS( DCE_NS_URL, tag ) );
+    {   parent.append( s = create( tag ) );
         return s;
     };
     const l = inject( sectionName, root );
@@ -71,70 +81,133 @@ Json2Xml( o, tag )
         ret.push("/>");
     return ret.join('\n');
 }
+    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 );
+        if(m)
+        {   let l = 0
+            , txt = t => createText(e,t||'')
+            ,  tt = [];
+            [...m].forEach(t=>
+            {   if( t.index > l )
+                    tt.push( txt( t.input.substring( l, t.index ) ))
+                const v = e.ownerDocument.createElement('xsl:value-of');
+                v.setAttribute('select', t[1] );
+                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( tt.length )
+            {   for( let t of tt )
+                    d.insertBefore(t,e);
+                d.removeChild(e);
+            }
+        }
+    }));
 
+    if( 'all' in node ) {
+        let i= 1;
+        for( let e of node.all )
+            e.setAttribute && !e.tagName.startsWith('xsl:') && e.setAttribute('data-dce-id', '' + i++)
+    }
+    return node
+}
     export function
 createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 {
     if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
-        return templateNode
-    const dom = xml2dom(
-`<xsl:stylesheet version="1.0"
-    xmlns:xsl="${ XSL_NS_URL }"
+        return tagUid(templateNode)
+    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><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: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: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']"><dce-text><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></dce-text></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:stylesheet>`)
+    const sanitizeProcessor = new XSLTProcessor()
+    ,   tc = (n =>
+        {
+            forEach$(n,'script', s=> s.remove() );
+            const e = n.firstElementChild?.content || n.content
+            , asXmlNode = r => xslHtmlNs(xml2dom( '<xhtml/>' ).importNode(r, true));
+            if( e )
+            {   const t = create('div');
+                [ ...e.childNodes ].map( c => t.append(c.cloneNode(true)) )
+                return asXmlNode(t)
+            }
+            return  asXmlNode(n.documentElement || n.body || n)
+        })(templateNode)
+    ,   xslDom = xml2dom(
+        `<xsl:stylesheet version="1.0"
+        xmlns:xsl="${ XSL_NS_URL }"
+        xmlns:dce="urn:schemas-epa-wg:dce"
+        xmlns:exsl="http://exslt.org/common"
+        exclude-result-prefixes="exsl"
     >
-    <xsl:output method="html" />
-
+    <xsl:template mode="payload"  match="attributes"></xsl:template>
     <xsl:template match="/">
-        <xsl:for-each select="//attributes">
-            <xsl:call-template name="attributes"/>\t
-        </xsl:for-each>
+        <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:copy-of select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
                 <xsl:copy-of select="$defaultvalue"/>
             </xsl:otherwise>
         </xsl:choose>
     </xsl:template>
-    <xsl:template name="attributes"></xsl:template>
-    <xsl:variable name="slottemplate">
+    <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>`
-    );
-
-    const attrsTemplate = dom.documentElement.lastElementChild.previousElementSibling
-    , getTemplateRoot = n => n.documentElement || n.firstElementChild?.content || n.content || n.body || n
-    , tc = getTemplateRoot(templateNode)
-    , cc = tc?.childNodes || [];
-    if( (tc instanceof CustomElement) || tc.nodeType===11) {
-        for( let c of cc )
-            attrsTemplate.append(dom.importNode(c,true))
-    }else
-    {
-        attrsTemplate.append(dom.importNode(tc,true))
-    }
+        );
+
+    sanitizeProcessor.importStylesheet( sanitizeXsl );
 
-    const slot2xsl = s =>
-    {   const v = dom.firstElementChild.lastElementChild.lastElementChild.cloneNode(true);
-        v.firstElementChild.setAttribute('select',`'${s.name}'`)
+    const fr = sanitizeProcessor.transformToFragment(tc, document)
+    ,   $ = (e,css) => e.querySelector(css)
+    ,   payload = $( xslDom, 'template[mode="payload"]');
+    if( !fr )
+        return console.error("transformation error",{ xml:tc.outerHTML, xsl: xmlString( sanitizeXsl ) });
+
+    for( const c of fr.childNodes )
+        payload.append(xslDom.importNode(c,true))
+
+    const embeddedTemplates = [...payload.querySelectorAll('template')];
+    embeddedTemplates.forEach(t=>payload.ownerDocument.documentElement.append(t));
+
+    const   slotCall = $(xslDom,'call-template[name="slot"]')
+    ,       slot2xsl = s =>
+    {   const v = slotCall.cloneNode(true)
+        ,  name = attr(s,'name') || '';
+        name && v.firstElementChild.setAttribute('select',`'${ name }'`)
         for( let c of s.childNodes)
             v.lastElementChild.append(c)
         return v
     }
 
-    for( const s of attrsTemplate.querySelectorAll('slot') )
-        s.parentNode.replaceChild( slot2xsl(s), s )
+    forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
 
-    // apply bodyXml changes
-    return dom
+    return tagUid(xslDom)
 }
     export async function
 xhrTemplate(src)
@@ -175,9 +248,9 @@ deepEqual(a, b, O=false)
 injectSlice( x, s, data )
 {
     const isString = typeof data === 'string' ;
-
+    const createXmlNode = ( tag, t = '' ) => ( e => ((e.append( createText(x, t||''))),e) )(x.ownerDocument.createElement( tag ))
     const el = isString
-        ? create(s, data)
+        ? createXmlNode(s, data)
         : document.adoptNode( xml2dom( Json2Xml( data, s ) ).documentElement);
     [...x.children].filter( e=>e.localName === s ).map( el=>el.remove() );
     el.data = data
@@ -186,8 +259,7 @@ injectSlice( x, s, data )
 
 function forEach$( el, css, cb){
     if( el.querySelectorAll )
-        for( let n of el.querySelectorAll(css) )
-            cb(n)
+        [...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 )=>
@@ -215,6 +287,68 @@ const loadTemplateRoots = async ( src, dce )=>
         }
         return [dom]
     }catch (error){ return [dce]}
+}
+export function mergeAttr( from, to )
+{   if( isText(from) )
+    {
+        if( !isText(to) ){ debugger }
+        return
+    }
+    for( let a of from.attributes)
+        a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
+}
+export function assureUnique(n, id=0)
+{
+    const m = {}
+    for( const e of n.childNodes )
+    {
+        const a = attr(e,'data-dce-id') || e.dceId || 0;
+        if( !m[a] )
+        {   if( !a )
+            {   m[a] = e.dceId = ++id;
+                if( e.setAttribute )
+                    e.setAttribute('data-dce-id', e.dceId )
+            }else
+                m[a] = 1;
+        }else
+        {   const v = e.dceId = a + '-' + m[a]++;
+            if( e.setAttribute )
+                e.setAttribute('data-dce-id', v )
+        }
+        e.childNodes.length && assureUnique(e)
+    }
+}
+export function merge( parent, fromArr )
+{
+    const id2old = {};
+    for( let c of parent.childNodes)
+    {   ASSERT( !id2old[c.dceId] );
+        if( isText(c) )
+        {   ASSERT( c.data.trim() );
+            id2old[c.dceId || 0] = c;
+        } else
+            id2old[attr(c, 'data-dce-id') || 0] = c;
+    }
+    for( let e of [...fromArr] )
+    {
+        const o = id2old[ attr(e, 'data-dce-id') || e.dceId ];
+        if( o )
+        {   if( isText(e) )
+            {   if( o.nodeValue !== e.nodeValue )
+                    o.nodeValue = e.nodeValue;
+            }else
+            {   mergeAttr(o,e)
+                if( o.childNodes.length || e.childNodes.length )
+                    merge(o, e.childNodes)
+            }
+        }else
+            parent.append( e )
+    }
+}
+export function assureUID(n,attr)
+{   if( !n.hasAttribute(attr) )
+        n.setAttribute(attr, crypto.randomUUID());
+    return n.getAttribute(attr)
 }
     export class
 CustomElement extends HTMLElement
@@ -222,24 +356,54 @@ CustomElement extends HTMLElement
     async connectedCallback()
     {
         const templateRoots = await loadTemplateRoots( attr( this, 'src' ), this )
-        , templateDocs = templateRoots.map( n => createXsltFromDom( n ) )
+        ,               tag = attr( this, 'tag' )
+        ,           tagName = tag ? tag : 'dce-'+crypto.randomUUID();
+
+        for( const t of templateRoots )
+            forEach$(t.templateNode||t.content||t, 'style',s=>{
+                const slot = s.closest('slot');
+                const sName = slot ? `slot[name="${slot.name}"]`:'';
+                s.innerHTML = `${tagName} ${sName}{${s.innerHTML}}`;
+                this.append(s);
+            })
+        const templateDocs = templateRoots.map( n => createXsltFromDom( n ) )
         , xp = templateDocs.map( (td, p) =>{ p = new XSLTProcessor(); p.importStylesheet( td ); return p })
 
-        Object.defineProperty( this, "xsltString", { get: ()=>xp.map( td => xmlString(td) ).join('\n') });
+        Object.defineProperty( this, "xsltString", { get: ()=>templateDocs.map( td => xmlString(td) ).join('\n') });
 
-        const tag = attr( this, 'tag' );
         const dce = this;
         const sliceNames = [...this.templateNode.querySelectorAll('[slice]')].map(e=>attr(e,'slice'));
         class DceElement extends HTMLElement
         {
             connectedCallback()
-            {   const x = createNS( DCE_NS_URL,'datadom' );
+            {   if( this.firstElementChild?.tagName === 'TEMPLATE' )
+                {   const t = this.firstElementChild;
+                    for( const n of [...t.content.childNodes] )
+                        if( n.localName === 'style' ){
+                            const id = assureUID(this,'data-dce-style')
+                            n.innerHTML= `${tagName}[data-dce-style="${id}"]{${n.innerHTML}}`;
+                            t.insertAdjacentElement('beforebegin',n);
+                        }else
+                            if(n.nodeType===1)
+                                t.insertAdjacentElement('beforebegin',n);
+                            else if(n.nodeType===3)
+                                t.insertAdjacentText('beforebegin',n.data);
+
+                    t.remove();
+
+                }
+                const x = xml2dom( '<datadom/>' ).documentElement;
+                const createXmlNode = ( tag, t = '' ) => ( e =>
+                {   if( t )
+                        e.append( createText( x, t ))
+                    return e;
+                })(x.ownerDocument.createElement( tag ))
                 injectData( x, 'payload'    , this.childNodes, assureSlot );
-                injectData( x, 'attributes' , this.attributes, e => create( e.nodeName, e.value ) );
-                injectData( x, 'dataset', Object.keys( this.dataset ), k => create( k, this.dataset[ k ] ) );
-                const sliceRoot = injectData( x, 'slice', sliceNames, k => create( k, '' ) );
+                this.innerHTML='';
+                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, '' ) );
                 this.xml = x;
-                const slices = {};
 
                 const sliceEvents=[];
                 const applySlices = ()=>
@@ -249,7 +413,7 @@ CustomElement extends HTMLElement
                     {   const s = attr( ev.target, 'slice');
                         if( processed[s] )
                             continue;
-                        injectSlice( sliceRoot, s, ev.detail );
+                        injectSlice( sliceRoot, s, 'object' === typeof ev.detail ? {...ev.detail}: ev.detail );
                         processed[s] = ev;
                     }
                     Object.keys(processed).length !== 0 && transform();
@@ -271,17 +435,28 @@ CustomElement extends HTMLElement
                 };
                 const transform = ()=>
                 {
-                    const ff = xp.map( p => p.transformToFragment(x, document) );
-                    this.innerHTML = '';
+                    const ff = xp.map( (p,i) =>
+                    {   const f = p.transformToFragment(x, document)
+                        if( !f )
+                            console.error( "XSLT transformation error. xsl:\n", xmlString(templateDocs[i]), '\nxml:\n', xmlString(x) );
+                        return f
+                    });
                     ff.map( f =>
-                    {   [ ...f.childNodes ].forEach( e => this.append( e ) );
-
-                        forEach$( this,'[slice]', el =>
-                        {   if( 'function' === typeof el.sliceInit )
-                            {   const s = attr( el,'slice' );
-                                slices[s] = el.sliceInit( slices[s] );
-                            }
-                        })
+                    {   if( !f )
+                            return;
+                        assureUnique(f);
+                        merge( this, f.childNodes )
+                    })
+                    const changeCb = el=>this.onSlice({ detail: el[attr(el,'slice-prop') || 'value'], target: el })
+                    , hasInitValue = el => el.hasAttribute('slice-prop') || el.hasAttribute('value') || el.value;
+
+                    forEach$( this,'[slice]', el =>
+                    {   if( !el.dceInitialized )
+                        {   el.dceInitialized = 1;
+                            el.addEventListener( attr(el,'slice-update')|| 'change', ()=>changeCb(el) )
+                            if( hasInitValue(el) )
+                                changeCb(el)
+                        }
                     })
                 };
                 transform();
@@ -292,11 +467,11 @@ CustomElement extends HTMLElement
         if(tag)
             window.customElements.define( tag, DceElement);
         else
-        {   const t = 'dce-'+crypto.randomUUID()
+        {   const t = tagName;
             window.customElements.define( t, DceElement);
             const el = document.createElement(t);
             this.getAttributeNames().forEach(a=>el.setAttribute(a,this.getAttribute(a)));
-            el.append(...this.childNodes)
+            el.append(...[...this.childNodes].filter(e=>e.localName!=='style'))
             this.append(el);
         }
     }