@epa-wg/custom-element-dist 0.0.1

package/src/custom-element/demo/wc-square.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg 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>

package/src/custom-element/demo/xhtml-template.xhtml

@@ -0,0 +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>
+</html>

package/src/custom-element/demo/z.html

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

package/src/custom-element/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/src/custom-element/http-request.js

@@ -0,0 +1,89 @@
+const     attr = (el, attr)=> el.getAttribute(attr);
+
+export class HttpRequestElement extends HTMLElement
+{
+    static observedAttributes =
+    [   '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
+    }
+    get requestProps()
+    {   const ret = {};
+        [...this.attributes].filter(a=>!a.name.startsWith('header-'))
+                            .filter(a=>!a.name.startsWith('slice')).map( a => ret[a.name] = a.value );
+        return ret
+    }
+
+    disconnectedCallback(){ this.#destroy?.(); }
+
+    connectedCallback()
+    {
+        setTimeout(()=>this.fetch(),0)
+    }
+    #inProgressUrl = ''
+    #destroy = ()=>{}
+
+    async fetch()
+    {
+        if( !this.closest('body') )
+            return;
+        const url = attr(this, 'url') || '';
+        if( !url )
+        {   this.#destroy?.();
+            return this.value = {};
+        }
+
+        if( this.#inProgressUrl === url )
+            return ;
+
+        this.#inProgressUrl = url;
+        const controller = new AbortController();
+        this.#destroy = ()=> { controller.abort(this.localName+' disconnected'); this.#inProgressUrl = ''; }
+
+        const request = { ...this.requestProps, headers: this.requestHeaders }
+        ,       slice = { request }
+        ,      update = () => this.dispatchEvent( new Event('change') );
+        this.value = 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] )
+
+        slice.response = r;
+        update();
+        if( r.headers['content-type']?.includes('json'))
+            try
+            {   slice.data = await response.json();
+                update();
+            }catch(_e){}
+    }
+
+    attributeChangedCallback(name, oldValue, newValue)
+    {   if( name === 'url' )
+        {   if( oldValue !== newValue)
+            {
+                oldValue && this.#destroy?.();
+                if( newValue )
+                    setTimeout(()=>this.fetch(),10)
+                else
+                {   this.value = {}
+                    setTimeout(()=>this.dispatchEvent( new Event('change') ),10)
+                }
+            }
+        }
+    }
+
+}
+
+window.customElements.define( 'http-request', HttpRequestElement );
+export default HttpRequestElement;

package/src/custom-element/ide/IDE.md

@@ -0,0 +1,31 @@
+# Ide setup for DCE
+<details>
+<summary> VS Code </summary>
+Copy into `.vscode/settings.json`
+
+    {
+      "html.customData": [
+        "./node_modules/@epa-wg/custom-element/ide/customData-dce.json",
+        "./node_modules/@epa-wg/custom-element/ide/customData-xsl.json",
+        "./customData.json"
+      ],
+    }
+After editing the DCE in the HTML sources, update `./customData.json` with project' custom tags and attributes.
+</details>
+
+<details>
+<summary> IntelliJ </summary>
+Append into `package.json`
+
+    {
+        "web-types":[   "./node_modules/@epa-wg/custom-element/ide/web-types-dce.json",
+                        "./node_modules/@epa-wg/custom-element/ide/web-types-xsl.json",
+                        "./web_types.json"
+                    ],
+    }
+After editing the DCE in the HTML, update `./web-types.json` with project' custom tags and attributes.
+</details>
+
+# Publishing your components
+When preparing your package for publishing, make sure the instructions on IDE support with your package and DCE package 
+tags covered in IntelliJ and VS Code format.

package/src/custom-element/ide/customData-dce.json

@@ -0,0 +1,112 @@
+{
+  "version": 1.1,
+  "globalAttributes": [
+    {
+      "name": "slice",
+      "description": {
+        "kind": "markdown",
+        "value": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-event` event\n\nOn: any component with `value` and associated change event"
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
+        }
+      ]
+    },
+    {
+      "name": "slice-event",
+      "description": {
+        "kind": "markdown",
+        "value": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event"
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
+        }
+      ]
+    },
+    {
+      "name": "slice-value",
+      "description": {
+        "kind": "markdown",
+        "value": "XPath expression to populate into the slice"
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
+        }
+      ]
+    }
+  ],
+  "tags": [
+    {
+      "name": "custom-element",
+      "description": "Declarative Cuestom ELement(DCE).  `<custom-element tag='my-element'></custom-element>`.",
+      "attributes": [
+        {
+          "name": "hidden",
+          "description": "hides DCE definition to prevent visual appearance of content. Wrap the payload into template tag to prevent applying the inline CSS in global scope.",
+          "type": "boolean"
+        },
+        {
+          "name": "tag",
+          "description": "HTML tag for Custom Element. Used for window.customElements.define(). If not set, would be generated and DCE instance rendered inline.",
+          "type": "string"
+        },
+        {
+          "name": "src",
+          "description": "full, relative, or hash URL to DCE template",
+          "type": "string",
+          "references": [
+            {
+              "name": "example",
+              "url": "https://unpkg.com/@epa-wg/custom-element/demo/external-template.html"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "custom-element",
+          "url": "https://github.com/EPA-WG/custom-element"
+        }
+      ]
+    },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "select",
+          "description": "Uses an XPath expression to select nodes to be processed.",
+          "type": "string",
+          "references": [
+            {
+              "name": "MDN docs",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each#select"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "for-each",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each"
+        }
+      ]
+    },
+    {
+      "name": "slice",
+      "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
+      "references": [
+        {
+          "name": "README",
+          "url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events"
+        }
+      ]
+    }
+  ]
+}