@epa-wg/custom-element 0.0.16 → 0.0.18

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.vscode/settings.json

@@ -0,0 +1,25 @@
+{
+  "html.customData": [
+    "./ide/customData-dce.json",
+    "./ide/customData-xsl.json"
+  ],
+  "terminal.integrated.profiles.windows": {
+
+    "PowerShell": {
+      "source": "PowerShell",
+      "icon": "terminal-powershell"
+    },
+    "Command Prompt": {
+      "path": [
+        "${env:windir}\\Sysnative\\cmd.exe",
+        "${env:windir}\\System32\\cmd.exe"
+      ],
+      "args": [],
+      "icon": "terminal-cmd"
+    },
+    "Git Bash": {
+      "source": "Git Bash"
+    }
+  },
+  "terminal.integrated.defaultProfile.windows": "Git Bash"
+}

package/README.md

@@ -1,7 +1,7 @@
 # custom-element
 `Declarative Custom Element` (DCE) 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) 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. 
+discussion. **NO-JS** 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  
 [local-storage][local-storage-demo],  [http-request][http-request-demo], [location][location-demo].
@@ -45,6 +45,8 @@ This project is a POC( Proof of Concept ) targeting to become a base for native
 </details>
 
 # use
+
+Use the [bootstrap project](https://github.com/EPA-WG/custom-element-bootstrap) with all pre-configured or
 ## install
 use via CDN
 ```html
@@ -56,17 +58,21 @@ npm i -P @epa-wg/custom-element
 yarn add @epa-wg/custom-element
 ```
 
+## [enable IDE support](ide/IDE.md)
+
+
+
 ## [Live demo 🔗][demo-url]
 ```html
 <custom-element tag="pokemon-tile" hidden>
     <h3>{title}</h3> <!-- title is an attribute in instance
                                                  mapped into /*/attributes/title -->
-    <xsl:if test="//smile">                 <!-- data-smile DCE instance attribute,
+    <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: {//smile} </div>
-    </xsl:if>
+    </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"
          alt="{title} image"/>
@@ -133,10 +139,19 @@ constructor creates XML with
 
 DOM content is replaced with results of instance XML transformation by declaration XSLT.
 
+# `tag` attribute
+allows to define the Custom Element tag registered by `window.customElements.define()`.
+
+If omitted, the tag is auto-generated and the content is rendered inline.
+```html
+<custom-element> my tag is {tag} </custom-element>
+```
+See [demo](https://unpkg.com/@epa-wg/custom-element@0.0/demo/external-template.html) for `tag` attribute use.
+
 # `src` attribute
 allows to refer either external template or template within external library by `#id` hash in URL.
 
-See [demo](demo/external-template.html) with various samples.
+See [demo](https://unpkg.com/@epa-wg/custom-element@0.0/demo/external-template.html) with various samples.
 
 ## types of template
 * HTML with DCE syntax ( slots, data slices, xslt operators, etc. )
@@ -196,12 +211,12 @@ In same way as in DCE itself:
         </dce-2>
 ```
 ## Attributes
-To be served by IDE and to track the attributes changes, they have to be declared via `xsl:param` syntax:
+To be served by IDE and to track the attributes changes, they have to be declared via `attribute`:
 ```html
     <custom-element tag="dce-with-attrs" hidden>
-        <xsl:param name="p1" >default_P1</xsl:param>
-        <xsl:param name="p2" select="'always_p2'"  ></xsl:param>
-        <xsl:param name="p3" select="//p3 ?? 'def_P3' "  ></xsl:param>
+        <attribute name="p1" >default_P1                </attribute>
+        <attribute name="p2" select="'always_p2'"       ></attribute>
+        <attribute name="p3" select="//p3 ?? 'def_P3' " ></attribute>
         p1: {$p1} <br/> p2: {$p2} <br/> p3: {$p3}
     </custom-element>
     <dce-with-attrs p1="123" p3="qwe"></dce-with-attrs>
@@ -220,7 +235,7 @@ i.e.  slot `xxx` is matching `<i slot="xxx">...</i>` in payload.
 <custom-element tag="with-description" >
     <slot name="description">description is not available</slot>
     <!-- same as 
-        <xsl:value-of select='/*/payload/*[@slot="description"]'/>
+        <value-of select='/*/payload/*[@slot="description"]'/>
     -->
 </custom-element>
 <with-description>
@@ -229,12 +244,12 @@ i.e.  slot `xxx` is matching `<i slot="xxx">...</i>` in payload.
 ```
 
 ## loops, variables
-Loop implemented via [xsl:for-each](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each)
+Loop implemented via [for-each](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each)
 
 [Variables in XSLT](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/variable) 
 
 ## [XPath](https://developer.mozilla.org/en-US/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference)
-is available in `{}` in attributes, in `xsl:for-each`, `xsl:if`, `xsl:value-of`, and other XSL tags.
+is available in `{}` in attributes, in `for-each`, `if`, `value-of`, and other XSL tags.
 
 XPath is a selector language to navigate over custom element instance data, attributes, and payload.
 
@@ -253,12 +268,12 @@ in template. In such cases the `xhtml:` prefix in front of troubled tag would so
   <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/@*">
+      <for-each select="//basket/@*">
         <xhtml:tr>
           <xhtml:th> {name()} </xhtml:th>
           <xhtml:td> {.}      </xhtml:td>
         </xhtml:tr>
-      </xsl:for-each>
+      </for-each>
     </xhtml:tbody>
     <xhtml:tfoot>
       <xhtml:tr>
@@ -293,7 +308,7 @@ 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: <value-of select='name()'/></b>
 ```
 
 [git-url]:        https://github.com/EPA-WG/custom-element
@@ -308,9 +323,9 @@ within template
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.16/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.16/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.16/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.18/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.18/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.18/storybook-static/index.html?path=/story/welcome--introduction
 [sandbox-url]:    https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
 [webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
 [webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg

package/bin/xslDtd2Ide.mjs

@@ -0,0 +1,160 @@
+/**
+ * node xslDtd2Ide.cjs
+ * would get xsl 1.0 schema and populate IntelliJ and VS Code IDE custom elements definitions
+ *
+ * This is one time use script as XSLT 1.0 schema is not changing.
+ * DTD parsing here is not generic and cobers only particula XSLT 1.0 schema.
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+
+
+const dtdText = await fetch( 'https://www.w3.org/1999/11/xslt10.dtd' )
+    .then( ( response ) => response.text() )
+    .then( ( body ) =>
+    {
+        return body;
+    } );
+const matches = dtdText.match( /<([^>]*)>/g );
+
+const chopOff = ( s, begin = 1, end = 1 ) => s.substring( begin, s.length - end );
+const trim = s => s?.trim ? s.trim() : s;
+
+let lastComment = ''
+const dtdObj = { ENTITY: {}, ELEMENT: {} }
+for( const match of matches ){
+    if( match.startsWith( '<!--' ) ) {
+        lastComment = match;
+        continue;
+    }
+    const body = chopOff( match, 2 );
+    const arr = body.split( /\s/ );
+    const name = arr[ 1 ].trim();
+    const resolveRef = s => s ? ( s.startsWith ? ( s.startsWith( '%' ) ? dtdObj.ENTITY[ chopOff( s, 1, 0 ).replace( ';',
+        '' ) ] : s ) : s ) : s;
+    const attrObj = a =>
+    {
+        if( !a || Array.isArray( a ) || !a.trim )
+            return a;
+        const as = a.trim();
+        if( 'CDATA,#PCDATA,NMTOKEN,NMTOKENS,'.includes( as + ',' ) )
+            return as;
+        const ar = as.split( ';' )
+        const aa = ar[ 0 ].split( ' ' );
+        // if( aa[0].includes('select')){debugger;}
+        return { name: aa[ 0 ], type: resolveRef( aa[ 1 ] ), defValue: aa[ 1 ], required: (ar[1] || aa[ 2 ])?.trim() }
+    };
+    switch( arr[ 0 ] ){
+        case 'ENTITY':{
+            let key = arr[ 2 ];
+            let val = body.substring( body.indexOf( key ) + key.length ).trim();
+            let ss;
+            if( val.startsWith( '"' ) || val.startsWith( "'" ) ) {
+                val = chopOff( val );
+                if( val.includes( '(#PCDATA' ) ) {
+                    val = val.replace( '(#PCDATA', '' ).replace( ')*', '' ).trim();
+                    ss = [ '#PCDATA', ...val.split( '\n' ).map( s => s.trim() ).map( resolveRef ).flat() ];
+                } else
+                    ss = val.split( /[\n]/ ).map( s => s.replace( '|', '' ).trim() ).filter( s => s );
+            } else
+                ss = val.split( /[|\n]/ );
+
+            const v = ss.map( trim ).filter( s => s ).map( resolveRef ).map( attrObj ).flat().filter( s => s );
+            dtdObj.ENTITY[ key ] = !v.length ? '' : v.length === 1 ? v[ 0 ] : v;
+            break;
+        }
+        case 'ELEMENT':
+            dtdObj.ELEMENT[ name ] = { values: arr[ 2 ], attributes: [] };
+            break;
+        case 'ATTLIST':{
+            const attrStr = body.split( name )[ 1 ].trim();
+            const attrs = attrStr.split( '\n' ).map( s => s.trim() );
+            const elementAttrs = dtdObj.ELEMENT[ name ].attributes;
+            for( let a of attrs ){
+                if( a.startsWith( '%' ) ) {
+                    const v = dtdObj.ENTITY[ chopOff( a.split( ';' )[ 0 ], 1, 0 ) ];
+                    if( !v ) {
+                        debugger;
+                    }
+                    Array.isArray( v )
+                    ? elementAttrs.push( ...v )
+                    : elementAttrs.push( v );
+                } else
+                    elementAttrs.push( attrObj( a ) );
+            }
+
+            break;
+        }
+    }
+}
+
+// replace the tags list in custom-element.js
+
+const tagsCsv = Object.keys( dtdObj.ELEMENT ).map( s => s.replace( 'xsl:', '' ) ).join( ',' );
+const jsText = readFileSync( '../custom-element.js', 'utf8' )
+const updatedJs = jsText.replace( /^.*export const xslTags = .*$/mg,
+    `export const xslTags = '${ tagsCsv }'.split(',');` );
+writeFileSync( '../custom-element.js', updatedJs );
+
+const vsCode = {
+    "version": 1.1, tags: Object.keys( dtdObj.ELEMENT ).map( s => (
+        {   name        : s.replace( 'xsl:', '' )
+        ,   description : `${ s }`
+        ,   attributes  : dtdObj.ELEMENT[ s ].attributes.map( a => (
+                            {   name         : a.name
+                            ,   description: `${ JSON.stringify( a ) }`
+                            ,   type       : "string"
+                            ,   required    : a.required === '#REQUIRED'
+                            } ) )
+        ,    references : [ {   name: "MDN docs"
+                            ,   url : `https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/${s.replace( 'xsl:', '' )}`
+                            }]
+        } ) )
+};
+
+writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined, 4 ) );
+
+const intelliJ = {
+    "$schema": "http://json.schemastore.org/web-types",
+    "name": "@epa-wg/custom-element",
+    "version": "0.0.18",
+    "js-types-syntax": "typescript",
+    "description-markup": "markdown",
+    "contributions": {
+        "html": {
+            "elements": [
+                ...Object.keys( dtdObj.ELEMENT ).map( s => (
+                    {   name        : s.replace( 'xsl:', '' )
+                        ,   description : `${ s }`
+                        ,   attributes  : dtdObj.ELEMENT[ s ].attributes.map( a => (
+                            {   name        : a.name
+                            ,   description : `${ JSON.stringify( a ) }`
+                            ,   type        : "string"
+                            ,   required    : a.required === '#REQUIRED'
+                            } ) )
+                        ,   'doc-url'   : `https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/${s.replace( 'xsl:', '' )}`
+                    } ) ),
+                {
+                    "name": "for-each",
+                    "description": "The <xsl:for-each> element selects a set of nodes and processes each of them in the same way. It is often used to iterate through a set of nodes or to change the current node. If one or more <xsl:sort> elements appear as the children of this element, sorting occurs before processing. Otherwise, nodes are processed in document order.",
+                    "doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each",
+                    "attributes": [
+                        {
+                            "name": "select",
+                            "description": "Uses an XPath expression to select nodes to be processed.",
+                            "required": true,
+                            "doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each#select",
+                            "value": {
+                                "type": "string"
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+};
+
+
+writeFileSync( '.././ide/web-types-xsl.json', JSON.stringify( intelliJ, undefined, 4 ) );
+
+

package/custom-element.d.ts

@@ -1,4 +1,35 @@
 export function log(x: any): void;
+
+/**
+ * @summary Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating
+ * ```html
+ * <custom-element tag="my-element">
+ *             <template>
+ *                 <attribute name="p1" >default_P1</attribute>
+ *                 <style>
+ *                     color:green;
+ *                     b{ color: blue;}
+ *                     input:checked+b{ color: darkblue; text-shadow: 0 0 4px springgreen;}
+ *                 </style>
+ *                 <label>
+ *                     green
+ *                     <input type="checkbox" value="Glowing Blue" checked/><b>blue</b>
+ *                 </label>
+ *                 p1:{$p1}
+ *             </template>
+ *         </custom-element>
+ * <my-element p1="abc"></my-element>
+ * ```
+ *
+ * @extends HTMLElement
+ * @tag custom-element
+ * @tag-name custom-element
+ * @attr {boolean} hidden - hides DCE definition to prevent visual appearance of content. Wrap the payload into template tag to prevent applying the inline CSS in global scope.
+ * @attr {string} tag - HTML tag for Custom Element. Used for window.customElements.define(). If not set, would be generated and DCE instance rendered inline.
+ * @attr {string} src - full, relative, or hash URL to DCE template.
+ *
+ */
 export class CustomElement extends HTMLElement {
+    static observedAttributes : string[];
 }
 export default CustomElement;

package/custom-element.js

@@ -12,7 +12,15 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   emptyNode = n=> { while(n.firstChild) n.firstChild.remove(); return n; }
 ,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ))
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
-,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) );
+,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
+,   cloneAs = (p,tag) =>
+{   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);
+    return px;
+}
 
     function
 ASSERT(x)
@@ -141,6 +149,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     ,   tc = (n =>
         {
             forEach$(n,'script', s=> s.remove() );
+            const xslRoot = n.content ?? n.firstElementChild?.content ?? n.body ?? n;
+            xslTags.forEach( tag => forEach$( xslRoot, tag, el=>toXsl(el,xslRoot) ) );
             const e = n.firstElementChild?.content || n.content
             , asXmlNode = r => {
                 const d = xml2dom( '<xhtml/>' )
@@ -202,14 +212,15 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     if( !fr )
         return console.error("transformation error",{ xml:tc.outerHTML, xsl: xmlString( sanitizeXsl ) });
     const params = [];
-    [...fr.querySelectorAll('dce-root>param')].forEach(p=>
-    {   payload.append(p);
+    [...fr.querySelectorAll('dce-root>attribute')].forEach(p=>
+    {   p = cloneAs(p,'xsl:param');
+        payload.append(p);
         let select = attr(p,'select')?.split('??')
         if( !select)
         {   select = ['//'+attr(p, 'name'), `'${p.textContent}'`];
             emptyNode(p);
         }
-        if( select?.length>1){
+        if( select?.length>1 ){
             p.removeAttribute('select');
             const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
             c.firstElementChild.setAttribute('test',select[0]);
@@ -383,9 +394,30 @@ export function assureUID(n,attr)
         n.setAttribute(attr, crypto.randomUUID());
     return n.getAttribute(attr)
 }
+export const xslTags = 'stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,template,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(',');
+export const toXsl = (el, defParent) => {
+    const x = create('xsl:'+el.localName);
+    for( let a of el.attributes )
+        x.setAttribute( a.name, a.value );
+    while(el.firstChild)
+        x.append(el.firstChild);
+    if( el.parentElement )
+        el.parentElement.replaceChild( x, el );
+    else
+    {  const p = (el.parentElement || defParent)
+        ,  arr = [...p.childNodes];
+        arr.forEach((n, i) => {
+            if (n === el)
+                arr[i] = x;
+        });
+        p.replaceChildren(...arr);
+    }
+};
+
     export class
 CustomElement extends HTMLElement
 {
+    static observedAttributes = ['src','tag','hidden'];
     async connectedCallback()
     {
         const templateRoots = await loadTemplateRoots( attr( this, 'src' ), this )
@@ -521,10 +553,11 @@ CustomElement extends HTMLElement
             window.customElements.define( tag, DceElement);
         else
         {   const t = tagName;
+            this.setAttribute('tag', t );
             window.customElements.define( t, DceElement);
             const el = document.createElement(t);
             this.getAttributeNames().forEach(a=>el.setAttribute(a,this.getAttribute(a)));
-            el.append(...[...this.childNodes].filter(e=>e.localName!=='style'))
+            el.append(...[...this.childNodes].filter( e => e.localName!=='style') );
             this.append(el);
         }
     }

package/demo/a.html

@@ -21,18 +21,13 @@
 </head>
 <body>
 
-<custom-element >
-    <local-storage key="basket" slice="basket"></local-storage>
-    <html:table>
-        <xsl:for-each select="//slice/basket/@*">
-            <html:tr>
-                <html:th> {name()} </html:th>
-                <html:td> {.}      </html:td>
-            </html:tr>
-        </xsl:for-each>
-    </html:table>
-    count:<xsl:value-of select="count(//slice/basket/@*)"/>
+<custom-element tag="dce-link" hidden>
+    <param name="p1" >default_P1                </param>
+    <param name="p2" select="'always_p2'"       ></param>
+    <param name="p3" select="//p3 ?? 'def_P3' " ></param>
+    p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
 </custom-element>
+<dce-link id="dce1" ></dce-link>
 
 </body>
 </html>

package/demo/hex-grid-dce.html

@@ -69,20 +69,20 @@
             }
         </style>
         <nav>
-            <xsl:for-each select="/datadom/payload/xhtml:*">
-                <xsl:if test="local-name(.) = 'style'">
-                    <xsl:copy-of select="." />
-                </xsl:if>
+            <for-each select="/datadom/payload/xhtml:*">
+                <if test="local-name(.) = 'style'">
+                    <copy-of select="." />
+                </if>
                 <!-- sanitize blank spans -->
-                <xsl:if test="local-name(.) != 'style' and (local-name(.) != 'span' or normalize-space(.) != '')">
+                <if test="local-name(.) != 'style' and (local-name(.) != 'span' or normalize-space(.) != '')">
                     <section>
                         <button class="action">
                             {@alt}
-                            <xsl:copy-of select="."/>
+                            <copy-of select="."/>
                         </button>
                     </section>
-                </xsl:if>
-            </xsl:for-each>
+                </if>
+            </for-each>
         </nav>
     </template>
 </custom-element>
@@ -152,14 +152,14 @@
                 }
             }
         </style>
-        <xsl:for-each select="/datadom/payload/xhtml:*">
+        <for-each select="/datadom/payload/xhtml:*">
             <!-- sanitize blank spans -->
-            <xsl:if test="local-name(.) != 'span' or normalize-space(.) != ''">
+            <if test="local-name(.) != 'span' or normalize-space(.) != ''">
                 <hex-grid>
-                    <xsl:copy-of select="."/>
+                    <copy-of select="."/>
                 </hex-grid>
-            </xsl:if>
-        </xsl:for-each>
+            </if>
+        </for-each>
     </template>
 </custom-element>
 <hex-row class="grid2x">

package/demo/http-request.html

@@ -43,18 +43,18 @@
             method="GET"
             header-accept="application/json"
             ></http-request>
-        <xsl:variable name="slides-url"
-            >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</xsl:variable>
-        <xsl:for-each select="//slice/page/data/results/*">
-            <xsl:variable name="pokeid"
+        <variable name="slides-url"
+            >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</variable>
+        <for-each select="//slice/page/data/results/*">
+            <variable name="pokeid"
                 select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
-                ></xsl:variable>
+                ></variable>
             <button>
                 <img src="{$slides-url}/{$pokeid}.svg"
                      alt="{@name}"/>
                 {@name}
             </button>
-        </xsl:for-each>
+        </for-each>
     </template>
 </custom-element>
     </template>
@@ -86,22 +86,22 @@
                     <tr><th>  //slice/request_slice/response/@status  </th>
                         <td>{ //slice/request_slice/response/@status }</td></tr>
                 </table>
-                <xsl:apply-templates mode="display" select="//slice/request_slice/*"></xsl:apply-templates>
-                <xsl:template mode="display" match="*">
+                <apply-templates mode="display" select="//slice/request_slice/*"></apply-templates>
+                <template mode="display" match="*">
                     <fieldset>
                         <legend> {local-name(.)} </legend>
                         <ul>
-                            <xsl:for-each select="@*">
+                            <for-each select="@*">
                                 <li>
                                     <var data-testid="section-attribute">@{local-name(.)}</var>
                                     =
-                                    <code><xsl:value-of select='.'/></code>
+                                    <code><value-of select='.'/></code>
                                 </li>
-                            </xsl:for-each>
+                            </for-each>
                         </ul>
-                        <xsl:apply-templates mode="display" select="*"></xsl:apply-templates>
+                        <apply-templates mode="display" select="*"></apply-templates>
                     </fieldset>
-                </xsl:template>
+                </template>
             </template>
         </custom-element>
     </template>

package/demo/local-storage.html

@@ -45,12 +45,12 @@
                 <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/@*">
+                        <for-each select="//basket/@*">
                             <xhtml:tr>
                                 <xhtml:th> {name()} </xhtml:th>
                                 <xhtml:td> {.}      </xhtml:td>
                             </xhtml:tr>
-                        </xsl:for-each>
+                        </for-each>
                     </xhtml:tbody>
                     <xhtml:tfoot>
                         <xhtml:tr>