@epa-wg/custom-element 0.0.11 → 0.0.12

package/demo/http-request.html

@@ -35,7 +35,7 @@
                    description="load the list of pokemons">
     <p>Should display 6 image buttons with pokemon name </p>
     <template>
-<custom-element tag="dce-1" hidden>
+<custom-element>
     <template><!-- wrapping into template to prevent images loading within DCE declaration -->
         <http-request
             url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
@@ -43,80 +43,67 @@
             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="slides-url"
-                >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</xsl:variable>
             <xsl:variable name="pokeid"
                 select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
                 ></xsl:variable>
             <button>
                 <img src="{$slides-url}/{$pokeid}.svg"
                      alt="{@name}"/>
-                <xsl:value-of select='@name'/>
+                {@name}
             </button>
         </xsl:for-each>
     </template>
 </custom-element>
-<dce-1></dce-1>
     </template>
 </html-demo-element>
 
-<html-demo-element legend="1. http-request headers"
+<html-demo-element legend="2. http-request response and headers"
                    description="request and response headers access demo">
 
     <template>
-            <custom-element
-                tag="headers-demo"
-                hidden
-                >
-<http-request
-    url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6"
-    slice="request_slice"
-    type="text"
-    mode="cors"
-    header-x-test="testing"
-    ></http-request>
-Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
-from <code>${url}</code>
+        <custom-element url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6">
+            <template> <!-- IMPORTANT! to wrap DCE payload into template to avoid
+                               http-request initializing out of instance -->
+                <http-request
+                        url="{url}"
+                        slice="request_slice"
+                        type="text"
+                        mode="cors"
+                        header-x-test="testing"
+                ></http-request>
+                Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
+                from <code>${url}</code>
 
-<h3>Samples</h3>
-<table>
-<tr><th>//slice/request_slice/request/headers/@mode</th>
-    <td><xsl:value-of select="//slice/request_slice/request/@mode"/></td></tr>
-<tr><th>//slice/request_slice/response/headers/@content-type</th>
-    <td><xsl:value-of select="//slice/request_slice/response/headers/@content-type"/></td></tr>
-<tr><th>//slice/request_slice/response/@status</th>
-    <td><xsl:value-of select="//slice/request_slice/response/@status"/></td></tr>
-</table>
-<xsl:for-each select="//slice/request_slice/*">
-    <ul data-request-section="{name(.)}">
-        <b data-testid="request-section"><xsl:value-of select='name(.)'/></b>
-        <xsl:for-each select="@*">
-            <div>
-                <var data-testid="section-attribute">@<xsl:value-of select='local-name(.)'/></var>
-                =
-                <code><xsl:value-of select='.'/></code>
-            </div>
-        </xsl:for-each>
-        <xsl:for-each select="*">
-            <div>
-                <b data-testid="section-deep"><xsl:value-of select='local-name(.)'/></b>
-                <ul>
-                    <xsl:for-each select="@*">
-                        <li>
-                            <var data-testid="section-attribute">@<xsl:value-of select='local-name(.)'/></var>
-                            =
-                            <code><xsl:value-of select='.'/></code>
-                        </li>
-                    </xsl:for-each>
-                    <code><xsl:value-of select='.'/></code>
-                </ul>
-            </div>
-        </xsl:for-each>
-    </ul>
-</xsl:for-each>
-            </custom-element>
-            <headers-demo></headers-demo>
+                <h3>Samples</h3>
+                <table>
+                    <tr><th>  //slice/request_slice/request/@mode  </th>
+                        <td>{ //slice/request_slice/request/@mode }</td></tr>
+                    <tr><th>  //slice/request_slice/response/headers/@content-type  </th>
+                        <td>{ //slice/request_slice/response/headers/@content-type }</td></tr>
+                    <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="*">
+                    <fieldset>
+                        <legend> {local-name(.)} </legend>
+                        <ul>
+                            <xsl:for-each select="@*">
+                                <li>
+                                    <var data-testid="section-attribute">@{local-name(.)}</var>
+                                    =
+                                    <code><xsl:value-of select='.'/></code>
+                                </li>
+                            </xsl:for-each>
+                        </ul>
+                        <xsl:apply-templates mode="display" select="*"></xsl:apply-templates>
+                    </fieldset>
+                </xsl:template>
+            </template>
+        </custom-element>
     </template>
 </html-demo-element>
 

package/demo/local-storage.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>custom-element Declarative Custom Element implementation demo</title>
@@ -28,8 +28,8 @@
     <p>Has to produce 12🍒</p>
     <template>
         <custom-element tag="dce-1" hidden>
-            <xsl:value-of select="//slice/fruits/text()"></xsl:value-of>
-           <slot>🤔</slot>
+            {//slice/fruits/text()}
+            <slot>🤔</slot>
             <local-storage key="cherries" slice="fruits"></local-storage>
         </custom-element>
         <dce-1>🍒</dce-1>
@@ -41,21 +41,25 @@
     <p>Click the fruits button to add into cart </p>
     <template>
         <custom-element tag="dce-2" hidden>
-            <local-storage key="basket" slice="basket" live type="json"></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:tfoot>
-                    <html:tr>
-                        <html:td><slot>🤔</slot></html:td>
-                        <html:th><xsl:value-of select="sum(//slice/basket/@*)"/></html:th>
-                    </html:tr>
-                </html:tfoot>
-            </html:table>
+            <template>
+                <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>
+            </template>
         </custom-element>
         <dce-2>🛒total</dce-2>
     </template>
@@ -90,6 +94,7 @@
             basket[k] || (basket[k] = 1);
             localStorage.setItem( k, basket[k] = 1+1*localStorage[k] )
             localStorage.setItem( 'basket', JSON.stringify(basket) );
+            renderStorage();
         } );
 
     const renderStorage = () =>

package/demo/location-element.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>custom-element Declarative Custom Element implementation demo</title>
@@ -24,7 +25,7 @@
 <html-demo-element legend="Change window URL">
     <template>
         <a href="#dce2">#dce2</a>
-        <form >
+        <form method="get">
             <input name="p1" value="abc"/>
             <input name="p2" value="def"/>
             <input type="submit" value="params"/>
@@ -38,7 +39,7 @@
 </html-demo-element>
 
 
-<html-demo-element legend="2. window.location live update"
+<html-demo-element legend="1. window.location live update"
                    description="In the page beginning change the window URL via link or by history change"
                    id="dce2"
     >
@@ -49,24 +50,20 @@
 
                 <location-element slice="window-url" live></location-element>
 
-                <html:table>
-                    <xsl:for-each select="//slice/window-url/@*">
-                        <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:tr>
-                        <html:th><u>params</u></html:th>
-                        <html:th></html:th>
-                    </html:tr>
-                    <xsl:for-each select="//slice/window-url/params/*">
-                        <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>
+                <xhtml:table>
+                        <tr><th><h3> URL properties </h3></th></tr>
+                        <xsl:apply-templates mode="attrs"  select="//slice/window-url/@*"></xsl:apply-templates>
+                </xhtml:table>
+                <xhtml:table>
+                        <tr><th><h3> URL parameters </h3></th></tr>
+                        <xsl:apply-templates mode="attrs"  select="//slice/window-url/params/*"></xsl:apply-templates>
+                </xhtml:table>
+                <xsl:template mode="attrs" match="*|@*">
+                    <xhtml:tr>
+                        <xhtml:th>{name()}</xhtml:th>
+                        <xhtml:td>{.}</xhtml:td>
+                    </xhtml:tr>
+                </xsl:template>
             </template>
         </custom-element>
         <dce-2>?</dce-2>
@@ -74,7 +71,7 @@
 </html-demo-element>
 
 
-<html-demo-element legend="1. window.location simplest"
+<html-demo-element legend="2. window.location simplest"
                    description="location read only during initial and only render, does not track the changes."
                    id="dce1">
     <p>Has to produce URL properties</p>
@@ -84,24 +81,26 @@
 
                 <location-element slice="window-url"></location-element>
 
-                <html:table>
-                    <xsl:for-each select="//slice/window-url/@*">
-                        <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:tr>
-                        <html:th><u>params</u></html:th>
-                        <html:th></html:th>
-                    </html:tr>
-                    <xsl:for-each select="//slice/window-url/params/*">
-                        <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>
+                <xhtml:table>
+                    <xhtml:tbody>
+                        <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
+                        <xsl:for-each select="//slice/window-url/@*">
+                            <xhtml:tr>
+                                <xhtml:th>{name()}</xhtml:th>
+                                <xhtml:td>{.}</xhtml:td>
+                            </xhtml:tr>
+                        </xsl:for-each>
+                    </xhtml:tbody>
+                    <xhtml:tbody>
+                        <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
+                        <xsl:for-each select="//slice/window-url/params/*">
+                            <xhtml:tr>
+                                <xhtml:th>{name()}</xhtml:th>
+                                <xhtml:td>{.}</xhtml:td>
+                            </xhtml:tr>
+                        </xsl:for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
             </template>
         </custom-element>
         <dce-1>?</dce-1>
@@ -119,24 +118,26 @@
 
                 <location-element slice="src-url" src="https://my.example?a=1&b=2#3"></location-element>
 
-                <html:table>
-                    <xsl:for-each select="//slice/src-url/@*">
-                        <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:tr>
-                        <html:th><u>params</u></html:th>
-                        <html:th></html:th>
-                    </html:tr>
-                    <xsl:for-each select="//slice/src-url/params/*">
-                        <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>
+                <xhtml:table>
+                    <xhtml:tbody>
+                        <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
+                        <xsl:for-each select="//slice/src-url/@*">
+                            <xhtml:tr>
+                                <xhtml:th>{name()}</xhtml:th>
+                                <xhtml:td>{.}</xhtml:td>
+                            </xhtml:tr>
+                        </xsl:for-each>
+                    </xhtml:tbody>
+                    <xhtml:tbody>
+                        <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
+                        <xsl:for-each select="//slice/src-url/params/*">
+                            <xhtml:tr>
+                                <xhtml:th>{name()}</xhtml:th>
+                                <xhtml:td>{.}</xhtml:td>
+                            </xhtml:tr>
+                        </xsl:for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
             </template>
         </custom-element>
         <dce-3>?</dce-3>

package/demo/s.xml

@@ -0,0 +1 @@
+<datadom><payload><i xmlns="http://www.w3.org/1999/xhtml" slot="">loading from HTML file ...</i></payload><attributes><src>/src/demo/html-template.html</src><tag/><data-smile>👼</data-smile><attr-1>a1</attr-1><attr-2>a2</attr-2></attributes><dataset><smile>👼</smile></dataset><slice/></datadom>

package/demo/s.xslt

@@ -0,0 +1,159 @@
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dce="urn:schemas-epa-wg:dce"
+                xmlns:exsl="http://exslt.org/common" version="1.0" exclude-result-prefixes="exsl">
+    <xsl:template mode="payload" match="attributes">
+        <dce-root xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
+            <head data-dce-id="2">
+
+                <title data-dce-id="4">template based on HTML file</title>
+            </head>
+            <body data-dce-id="5">
+                <b id="wave" data-dce-id="6">👋</b>
+                <b id="ok" data-dce-id="7">👌</b>
+                <svg xmlns="http://www.w3.org/2000/svg" id="dwc-logo" viewBox="0 0 216 209.18" data-dce-id="8">
+                    <defs data-dce-id="9">
+                        <style data-dce-id="10">
+                            .cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}
+                        </style>
+                    </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"
+                             data-dce-id="11"/>
+                    <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"
+                          data-dce-id="12"/>
+                    <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"
+                          data-dce-id="13"/>
+                    <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"
+                          data-dce-id="14"/>
+                    <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"
+                          data-dce-id="15"/>
+                    <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"
+                          data-dce-id="16"/>
+                    <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"
+                          data-dce-id="17"/>
+                    <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"
+                          data-dce-id="18"/>
+                    <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"
+                          data-dce-id="19"/>
+                    <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"
+                          data-dce-id="20"/>
+                    <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"
+                          data-dce-id="21"/>
+                    <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"
+                          data-dce-id="22"/>
+                    <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"
+                          data-dce-id="23"/>
+                    <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"
+                          data-dce-id="24"/>
+                    <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"
+                          data-dce-id="25"/>
+                    <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"
+                          data-dce-id="26"/>
+                    <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"
+                          data-dce-id="27"/>
+                    <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"
+                          data-dce-id="28"/>
+                    <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"
+                          data-dce-id="29"/>
+                    <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"
+                          data-dce-id="30"/>
+                    <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"
+                          data-dce-id="31"/>
+                    <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"
+                          data-dce-id="32"/>
+                </svg>
+                <math xmlns="http://www.w3.org/1998/Math/MathML" id="sophomores-dream" display="block" data-dce-id="33">
+                    <mrow data-dce-id="34">
+                        <msubsup data-dce-id="35">
+                            <mo data-dce-id="36">∫</mo>
+                            <mn data-dce-id="37">0</mn>
+                            <mn data-dce-id="38">1</mn>
+                        </msubsup>
+                        <msup data-dce-id="39">
+                            <mi data-dce-id="40">x</mi>
+                            <mi data-dce-id="41">x</mi>
+                        </msup>
+                        <mo rspace="0.22em" data-dce-id="42">⁢</mo>
+                        <mo rspace="0" data-dce-id="43">ⅆ</mo>
+                        <mi data-dce-id="44">x</mi>
+                        <mo data-dce-id="45">=</mo>
+                        <munderover data-dce-id="46">
+                            <mo data-dce-id="47">∑</mo>
+                            <mrow data-dce-id="48">
+                                <mi data-dce-id="49">n</mi>
+                                <mo data-dce-id="50">=</mo>
+                                <mn data-dce-id="51">1</mn>
+                            </mrow>
+                            <mn data-dce-id="52">∞</mn>
+                        </munderover>
+                        <msup data-dce-id="53">
+                            <mrow data-dce-id="54">
+                                <mo data-dce-id="55">(</mo>
+                                <mrow data-dce-id="56">
+                                    <mo form="prefix" data-dce-id="57">−</mo>
+                                    <mn data-dce-id="58">1</mn>
+                                </mrow>
+                                <mo data-dce-id="59">)</mo>
+                            </mrow>
+                            <mrow data-dce-id="60">
+                                <mi data-dce-id="61">n</mi>
+                                <mo data-dce-id="62">+</mo>
+                                <mn data-dce-id="63">1</mn>
+                            </mrow>
+                        </msup>
+                        <mo data-dce-id="64">⁢</mo>
+                        <msup data-dce-id="65">
+                            <mi data-dce-id="66">n</mi>
+                            <mrow data-dce-id="67">
+                                <mo form="prefix" data-dce-id="68">−</mo>
+                                <mi data-dce-id="69">n</mi>
+                            </mrow>
+                        </msup>
+                    </mrow>
+                </math>
+                <script type="module" src="/__web-dev-server__web-socket.js?wds-import-map=0" data-dce-id="70"/>
+            </body>
+        </dce-root>
+    </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>

package/demo/table.xml

@@ -1,25 +1,25 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?xml-stylesheet type="text/xsl" href="table.xsl"?>
-<div xmlns="http://www.w3.org/1999/xhtml">
-    <payload>
-        <span slot=""></span>
-        <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
-            the seed grows in size as the Pokémon does.
-        </p>
-        <span slot=""></span>
-        <ul slot="">
-            <li pokemon-id="2">ivysaur</li>
-            <li pokemon-id="3">venusaur</li>
-        </ul>
-        <span slot=""></span>
-    </payload>
-    <attributes>
-        <title>bulbasaur</title>
-        <data-smile>👼</data-smile>
-        <pokemon-id>1</pokemon-id>
-    </attributes>
-    <dataset>
-        <smile>👼</smile>
-    </dataset>
-    <slice></slice>
+<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet type="text/xsl" href="table.xsl"?>
+<div xmlns="http://www.w3.org/1999/xhtml">
+    <payload>
+        <span slot=""></span>
+        <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
+            the seed grows in size as the Pokémon does.
+        </p>
+        <span slot=""></span>
+        <ul slot="">
+            <li pokemon-id="2">ivysaur</li>
+            <li pokemon-id="3">venusaur</li>
+        </ul>
+        <span slot=""></span>
+    </payload>
+    <attributes>
+        <title>bulbasaur</title>
+        <data-smile>👼</data-smile>
+        <pokemon-id>1</pokemon-id>
+    </attributes>
+    <dataset>
+        <smile>👼</smile>
+    </dataset>
+    <slice></slice>
 </div>