@epa-wg/custom-element 0.0.11 → 0.0.13

package/demo/template.xsl

@@ -1,46 +1,46 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
-    <xsl:output method="html"/>
-
-    <xsl:template match="/">
-        <xsl:apply-templates select="//attributes"/>
-    </xsl:template>
-    <xsl:template match="attributes">
-        <h3 xmlns="http://www.w3.org/1999/xhtml">
-            <xsl:value-of select="title"></xsl:value-of>
-        </h3> <!-- title is an attribute in instance
-                                                             mapped into /*/attributes/title -->
-        <xsl:if xmlns="http://www.w3.org/1999/xhtml" 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"></xsl:value-of>
-            </div>
-        </xsl:if>
-        <!-- image would not be visible in sandbox, see live demo -->
-        <img xmlns="http://www.w3.org/1999/xhtml"
-             src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
-             alt="{title} image"/>
-        <!-- image-src and title are DCE instance attributes,
-             mapped into /*/attributes/
-             used within output attribute via curly brackets -->
-
-        <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
-        <p xmlns="http://www.w3.org/1999/xhtml">
-            <xsl:value-of select="//*[@slot=&quot;description&quot;]"/>
-        </p>
-        <xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//*[@pokemon-id]">
-            <!-- loop over payload elements with `pokemon-id` attribute -->
-            <button>
-                <img height="32"
-                     src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
-                     alt="{text()}"/>
-                <br/>
-                <xsl:value-of select="text()">
-                </xsl:value-of>
-            </button>
-
-        </xsl:for-each>
-    </xsl:template>
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
+    <xsl:output method="html"/>
+
+    <xsl:template match="/">
+        <xsl:apply-templates select="//attributes"/>
+    </xsl:template>
+    <xsl:template match="attributes">
+        <h3 xmlns="http://www.w3.org/1999/xhtml">
+            <xsl:value-of select="title"></xsl:value-of>
+        </h3> <!-- title is an attribute in instance
+                                                             mapped into /*/attributes/title -->
+        <xsl:if xmlns="http://www.w3.org/1999/xhtml" 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"></xsl:value-of>
+            </div>
+        </xsl:if>
+        <!-- image would not be visible in sandbox, see live demo -->
+        <img xmlns="http://www.w3.org/1999/xhtml"
+             src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
+             alt="{title} image"/>
+        <!-- image-src and title are DCE instance attributes,
+             mapped into /*/attributes/
+             used within output attribute via curly brackets -->
+
+        <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
+        <p xmlns="http://www.w3.org/1999/xhtml">
+            <xsl:value-of select="//*[@slot=&quot;description&quot;]"/>
+        </p>
+        <xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//*[@pokemon-id]">
+            <!-- loop over payload elements with `pokemon-id` attribute -->
+            <button>
+                <img height="32"
+                     src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
+                     alt="{text()}"/>
+                <br/>
+                <xsl:value-of select="text()">
+                </xsl:value-of>
+            </button>
+
+        </xsl:for-each>
+    </xsl:template>
 </xsl:stylesheet>

package/demo/tree.xml

@@ -1,25 +1,25 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?xml-stylesheet type="text/xsl" href="tree.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="tree.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>

package/demo/tree.xsl

@@ -1,33 +1,33 @@
-<xsl:stylesheet version="1.0"
-                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-    <xsl:output
-            method="html"
-            omit-xml-declaration="yes"
-            standalone="yes"
-            indent="yes"
-    />
-
-    <xsl:template match="/">
-        <xsl:apply-templates select="*"/>
-    </xsl:template>
-    <xsl:template match="*">
-        <details style="padding:0 1rem" open="open">
-            <summary>
-                <b style="color:green"><xsl:value-of select="name()"/></b>
-                <xsl:apply-templates select="@*"/>
-            </summary>
-            <xsl:value-of select="./text()"/>
-            <xsl:apply-templates select="*"/>
-        </details>
-    </xsl:template>
-    <xsl:template match="@*">
-        <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
-    </xsl:template>
-    <xsl:template match="text()">
-            <p>
-                <xsl:value-of select="."/>
-            </p>
-    </xsl:template>
-
-
+<xsl:stylesheet version="1.0"
+                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <xsl:output
+            method="html"
+            omit-xml-declaration="yes"
+            standalone="yes"
+            indent="yes"
+    />
+
+    <xsl:template match="/">
+        <xsl:apply-templates select="*"/>
+    </xsl:template>
+    <xsl:template match="*">
+        <details style="padding:0 1rem" open="open">
+            <summary>
+                <b style="color:green"><xsl:value-of select="name()"/></b>
+                <xsl:apply-templates select="@*"/>
+            </summary>
+            <xsl:value-of select="./text()"/>
+            <xsl:apply-templates select="*"/>
+        </details>
+    </xsl:template>
+    <xsl:template match="@*">
+        <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
+    </xsl:template>
+    <xsl:template match="text()">
+            <p>
+                <xsl:value-of select="."/>
+            </p>
+    </xsl:template>
+
+
 </xsl:stylesheet>

package/demo/xhtml-template.xhtml

@@ -1,45 +1,45 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-<head>
-    <meta charset="UTF-8">
-    <title>template based on HTML file</title>
-</head>
-<body>
-  <b id="wave">👋</b>
-  <b id="ok">👌</b>
-  <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.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"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>
-  <xsl:stylesheet
-        id="embedded-xsl"
-        version="1.0"
-        xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-    <xsl:output
-        method="html"
-        omit-xml-declaration="yes"
-        standalone="yes"
-        indent="yes"
-    />
-
-    <xsl:template match="/">
-        <xsl:apply-templates select="*"/>
-    </xsl:template>
-    <xsl:template match="*">
-        <details style="padding:0 1rem" open="open">
-            <summary>
-                <b style="color:green"><xsl:value-of select="name()"/></b>
-                <xsl:apply-templates select="@*"/>
-            </summary>
-            <xsl:value-of select="./text()"/>
-            <xsl:apply-templates select="*"/>
-        </details>
-    </xsl:template>
-    <xsl:template match="@*">
-        <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
-    </xsl:template>
-    <xsl:template match="text()">
-            <p>
-                <xsl:value-of select="."/>
-            </p>
-    </xsl:template>
-</xsl:stylesheet>
-</body>
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<head>
+    <meta charset="UTF-8">
+    <title>template based on HTML file</title>
+</head>
+<body>
+  <b id="wave">👋</b>
+  <b id="ok">👌</b>
+  <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.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"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>
+  <xsl:stylesheet
+        id="embedded-xsl"
+        version="1.0"
+        xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <xsl:output
+        method="html"
+        omit-xml-declaration="yes"
+        standalone="yes"
+        indent="yes"
+    />
+
+    <xsl:template match="/">
+        <xsl:apply-templates select="*"/>
+    </xsl:template>
+    <xsl:template match="*">
+        <details style="padding:0 1rem" open="open">
+            <summary>
+                <b style="color:green"><xsl:value-of select="name()"/></b>
+                <xsl:apply-templates select="@*"/>
+            </summary>
+            <xsl:value-of select="./text()"/>
+            <xsl:apply-templates select="*"/>
+        </details>
+    </xsl:template>
+    <xsl:template match="@*">
+        <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
+    </xsl:template>
+    <xsl:template match="text()">
+            <p>
+                <xsl:value-of select="."/>
+            </p>
+    </xsl:template>
+</xsl:stylesheet>
+</body>
 </html>

package/demo/z.html

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+    <table data-dce-id="2">
+        <tr data-dce-id="3">
+            <xhtml:th data-dce-id="4">href</xhtml:th>
+            <xhtml:td data-dce-id="5">http://localhost:63342/custom-element/demo/a.html?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</xhtml:td>
+        </tr>
+        <tr data-dce-id="3">
+            <xhtml:th data-dce-id="4">origin</xhtml:th>
+            <xhtml:td data-dce-id="5">http://localhost:63342</xhtml:td>
+        </tr>
+        <tr data-dce-id="3">
+            <xhtml:th data-dce-id="4">protocol</xhtml:th>
+            <xhtml:td data-dce-id="5">http:</xhtml:td>
+        </tr>
+        <tr data-dce-id="3">
+            <xhtml:th data-dce-id="4">host</xhtml:th>
+            <xhtml:td data-dce-id="5">localhost:63342</xhtml:td>
+        </tr>
+        <tr data-dce-id="3">
+            <xhtml:th data-dce-id="4">hostname</xhtml:th>
+            <xhtml:td data-dce-id="5">localhost</xhtml:td>
+        </tr>
+        <tr data-dce-id="3">
+            <xhtml:th data-dce-id="4">port</xhtml:th>
+            <xhtml:td data-dce-id="5">63342</xhtml:td>
+        </tr>
+        <tr data-dce-id="3">
+            <xhtml:th data-dce-id="4">pathname</xhtml:th>
+            <xhtml:td data-dce-id="5">/custom-element/demo/a.html</xhtml:td>
+        </tr>
+        <tr data-dce-id="3">
+            <xhtml:th data-dce-id="4">search</xhtml:th>
+            <xhtml:td data-dce-id="5">?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</xhtml:td>
+        </tr>
+        <tr data-dce-id="3">
+            <xhtml:th data-dce-id="4">hash</xhtml:th>
+            <xhtml:td data-dce-id="5"/>
+        </tr>
+    </table>
+    <location-element slice="window-url" data-dce-id="6"/>
+</dce-root>

package/demo/z.xml

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+    <location-element slice="window-url" data-dce-id="2"/>
+    <table data-dce-id="3">
+        <tr data-dce-id="4">
+            <th data-dce-id="5">
+                <u data-dce-id="6">URL properties</u>
+            </th>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">href</th>
+            <td data-dce-id="9">http://localhost:63342/custom-element/demo/a.html?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">origin</th>
+            <td data-dce-id="9">http://localhost:63342</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">protocol</th>
+            <td data-dce-id="9">http:</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">host</th>
+            <td data-dce-id="9">localhost:63342</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">hostname</th>
+            <td data-dce-id="9">localhost</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">port</th>
+            <td data-dce-id="9">63342</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">pathname</th>
+            <td data-dce-id="9">/custom-element/demo/a.html</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">search</th>
+            <td data-dce-id="9">?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
+        </tr>
+        <tr data-dce-id="7">
+            <th data-dce-id="8">hash</th>
+            <td data-dce-id="9"/>
+        </tr>
+        <tr data-dce-id="10">
+            <th data-dce-id="11">
+                <u data-dce-id="12">URL parameters</u>
+            </th>
+        </tr>
+        <tr data-dce-id="13">
+            <th data-dce-id="14">_ijt</th>
+            <td data-dce-id="15">qca6trk5kne6eo4s4tomq4egmm</td>
+        </tr>
+        <tr data-dce-id="13">
+            <th data-dce-id="14">_ij_reload</th>
+            <td data-dce-id="15">RELOAD_ON_SAVE</td>
+        </tr>
+    </table>
+</dce-root>

package/http-request.js

@@ -2,58 +2,49 @@ const     attr = (el, attr)=> el.getAttribute(attr);
 
 export class HttpRequestElement extends HTMLElement
 {
-    // @attribute url
-    constructor() {
-        super();
+    static get observedAttributes() {
+        return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
+                ,   'slice'
+                ,   'url'
+                ,   'method'
+                ,   'header-accept'
+                ]
     }
+
     get requestHeaders()
     {   const ret = {};
         [...this.attributes].filter(a=>a.name.startsWith('header-')).map( a => ret[a.name.substring(7)] = a.value );
-        return ret;
+        return ret
     }
     get requestProps()
     {   const ret = {};
         [...this.attributes].filter(a=>!a.name.startsWith('header-')).map( a => ret[a.name] = a.value );
-        return ret;
+        return ret
     }
-    sliceInit( s )
-    {   if( !s )
-            s = {};
-        s.element = this;
-        if( s.destroy )
-            return s;
-        const controller = new AbortController();
-        s.destroy = ()=>
-        {   // todo destroy slices in custom-element
-            controller.abort();
-        };
+
+    disconnectedCallback(){ this._destroy?.(); }
+
+    connectedCallback()
+    {   const controller = new AbortController();
+        this._destroy = ()=> controller.abort(this.localName+' disconnected');
+
         const     url = attr(this, 'url') || ''
         ,     request = { ...this.requestProps, headers: this.requestHeaders }
-        ,       slice = { detail: { request }, target: this }
-        , updateSlice = slice =>
-        {   for( let parent = s.element.parentElement; parent; parent = parent.parentElement )
-                if ( parent.onSlice )
-                    return parent.onSlice(slice);
-            console.error(`${this.localName} used outside of custom-element`)
-            debugger;
-        };
-
+        ,       slice = { request }
+        ,      update = () => this.dispatchEvent( new Event('change') );
+        this.value = slice;
         setTimeout( async ()=>
-        {   updateSlice( slice );
+        {   update();
             const response = await fetch(url,{ ...this.requestProps, signal: controller.signal, headers: this.requestHeaders })
-            ,      r= {headers: {}};
-            [...response.headers].map( ([k,v]) => r.headers[k]=v );
-            'ok,status,statusText,type,url,redirected'.split(',').map(k=>r[k]=response[k])
+            ,      r = {headers: {}};
+            [...response.headers].map( ([k,v]) => r.headers[k] = v );
+            'ok,status,statusText,type,url,redirected'.split(',').map( k=> r[k] = response[k] )
 
-            slice.detail.response = r;
-            updateSlice( slice );
-            const detail = {...slice.detail}
-            detail.data = await response.json();
-            const s = {...slice, detail}
-            updateSlice( s );
+            slice.response = r;
+            update();
+            slice.data = await response.json();
+            update();
         },0 );
-
-        return s;
     }
 }
 

package/index.html

@@ -25,11 +25,14 @@
         The data query is powered by XPath. </p>
     <p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
     <section>
-    <b>Data layer demo</b>
+    <h4>Data layer demo</h4>
         <a href="./demo/local-storage.html"     >local-storage      </a> |
         <a href="./demo/http-request.html"      >http-request       </a> |
         <a href="./demo/location-element.html"  >location-element   </a> |
-        <a href="./demo/external-template.html" >external template  </a>
+        <a href="./demo/external-template.html" >external template  </a> <br/>
+        <a href="./demo/hex-grid.html"          >hex grid lib       </a> |
+        <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
+        <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
     </section>
 </nav>
 <html-demo-element legend="1. simple payload"
@@ -58,7 +61,7 @@
         <custom-element tag="dce-2-slots" hidden>
            <slot name="slot2"> 😃</slot> and again:
            <slot name="slot2"> 😃</slot>
-            <input placeholder="🐇❤️{//*[@slot='slot2']}"/>
+            <xhtml:input placeholder="🐇❤️{//*[@slot='slot2']}"/>
         </custom-element>
         <dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
         <dce-2-slots></dce-2-slots>
@@ -108,13 +111,13 @@
 
         <custom-element tag="pokemon-tile" hidden id="shared-template">
             <template>
-                <h3><xsl:value-of select="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>
+                <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: {//smile}</div> <!-- /datadom/dataset/smile -->
                 </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"
@@ -126,16 +129,17 @@
                                                         <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
                 <p><slot name="description"><i>description is not available</i></slot></p>
                 <xsl:for-each select="//*[@pokemon-id]">
-                                                    <!-- loop over payload elements with `pokemon-id` attribute -->
-                <button>
-                    <img height="32"
-                        src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
-                        alt="{text()}"/>
-                    <br/>
-                    <xsl:value-of select='text()'/>
-                </button>
+                                                        <!-- loop over payload elements with `pokemon-id` attribute,
+                                                            i.e LI elements -->
+                    <button>
+                        <img height="32"
+                            src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
+                            alt="{text()}"/>
+                        <br/>
+                        {text()} <!-- text from LI element in loop -->
+                    </button>
 
-            </xsl:for-each>
+                </xsl:for-each>
             </template>
         </custom-element>
 

package/input-text.js

@@ -0,0 +1,17 @@
+export class InputTextElement extends HTMLElement
+{
+    constructor()
+    {
+        super();
+        const i = this.ownerDocument.createElement('input');
+        for(let a of this.attributes)
+            a.namespaceURI ? i.setAttributeNS(a.namespaceURI,a.name,a.value) : i.setAttribute(a.name,a.value)
+        this.append(i)
+    }
+    get value(){ return this.firstChild.value }
+    set value(v){ return this.firstChild.value = v }
+    disconnectedCallback(){ }
+}
+
+window.customElements.define( 'input-text', InputTextElement );
+export default InputTextElement;