@epa-wg/custom-element 0.0.24 → 0.0.25

package/README.md

@@ -348,9 +348,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-dist@0.0.24/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.24/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.24/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/coverage/src/custom-element/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/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

@@ -116,7 +116,7 @@ writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined
 const intelliJ = {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.24",
+    "version": "0.0.25",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/custom-element.js

@@ -9,12 +9,22 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   isText = e => e.nodeType === 3
 ,   isString = s => typeof s === 'string'
 ,   isNode = e => e && typeof e.nodeType === 'number'
-,   create = ( tag, t = '', d=document ) => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
 ,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
 ,   removeChildren = n => { while(n.firstChild) n.firstChild.remove(); return n; }
 ,   emptyNode = n => {  n.getAttributeNames().map( a => n.removeAttribute(a) ); return removeChildren(n); }
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
 ,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
+,   isValidTagName = tag=> ( /^[_a-zA-Z][-_:a-zA-Z0-9]*$/ .test(tag) )
+,   create = ( tag, t = '', d=document ) =>
+{
+    const create = tag => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
+
+    if( isValidTagName(tag) )
+        return  create(tag)
+    const e = create('dce-object');
+    e.setAttribute('dce-object-name',tag)
+    return e;
+}
 ,   cloneAs = (p,tag) =>
 {   const px = p.ownerDocument.createElementNS(p.namespaceURI,tag);
     for( let a of p.attributes)
@@ -86,7 +96,7 @@ obj2node( o, tag, doc )
         if( isNode(o[k]) || typeof o[k] ==='function' || o[k] instanceof Window )
             continue
         else
-            if( typeof o[k] !== "object" )
+            if( typeof o[k] !== "object" && isValidTagName(k) )
                 ret.setAttribute(k, o[k] );
             else
                 ret.append(obj2node(o[k], k, doc))
@@ -594,7 +604,9 @@ CustomElement extends HTMLElement
                         e.append( createText( x, t ))
                     return e;
                 })(x.ownerDocument.createElement( tag ))
-                injectData( x, 'payload'    , payload , assureSlot );
+                const payloadNode = injectData( x, 'payload'    , payload , assureSlot );
+                xslNs(payloadNode);
+                xslHtmlNs(payloadNode);
                 this.innerHTML='';
                 const attrsRoot = injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
                 injectData( x, 'dataset', Object.keys( this.dataset ), k => createXmlNode( k, this.dataset[ k ] ) );
@@ -654,7 +666,7 @@ CustomElement extends HTMLElement
                     {   if( !el.dceInitialized )
                         {   el.dceInitialized = 1;
                             let evs = attr(el,'slice-event');
-                            if( attr(el,'custom-validity') )
+                            if( el.hasAttribute('custom-validity') )
                                 evs += ' change submit';
 
                             [...new Set((evs || 'change') .split(' '))]

package/demo/location-element.html

@@ -22,7 +22,19 @@
 <nav>
     <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
 </nav>
-<html-demo-element legend="Change window URL">
+<main>
+    <h3>How to get the page URL by location-element?</h3>
+    Answer: by defining following attributes:
+    <ol>
+        <li><code>slice</code> to one of values provided bellow</li>
+        <li><code>src</code> optionally with URL, If omitted, it would match the <code>window.location.href</code> </li>
+    </ol>
+    URL properties would be a part of slice data.
+    <p><a href="./set-url.html">Set page URL demo</a> </p>
+</main>
+<html-demo-element legend="Change window URL"
+                    description="use browser URL bar or those controls to change the page URL"
+                   >
     <template>
         <a href="#dce2">#dce2</a>
         <form method="get">
@@ -40,7 +52,8 @@
 
 
 <html-demo-element legend="1. window.location live update"
-                   description="In the page beginning change the window URL via link or by history change"
+                   description="Change the window URL via link or history change by controls in #1.
+                    Observe the changes detected by location-element slice."
                    id="dce2"
     >
     <p>Has to produce URL properties</p>
@@ -48,7 +61,7 @@
         <custom-element tag="dce-2" hidden>
             <template>
 
-                <location-element slice="window-url" live></location-element>
+                <location-element slice="window-url" live method="" src=""></location-element>
 
                 <xhtml:table>
                     <xhtml:tbody>
@@ -121,7 +134,7 @@
         <custom-element tag="dce-3" hidden>
             <template>
 
-                <location-element slice="href-url" href="https://my.example?a=1&b=2#3"></location-element>
+                <location-element slice="href-url" href="https://my.example?a=1&b=2#3" ></location-element>
 
                 <xhtml:table>
                     <xhtml:tbody>

package/demo/s.xml

@@ -1,11 +1,36 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <datadom>
+    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <button xmlns="http://www.w3.org/1999/xhtml" value="#dce4" slice="set-button" slice-event="click" slot="">set
+        </button>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <xsl:if xmlns="http://www.w3.org/1999/xhtml" test="//form-data/url" slot="">
+            <location-element method="{$selected-method}" src="{//form-data/url}"></location-element>
+            {$selected-method} - {//form-data/url}
+        </xsl:if>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+    </payload>
+    <attributes>
+        <tag>dce-9d95a532-8e54-414a-9077-08799530a637</tag>
+    </attributes>
+    <dataset/>
     <slice>
-        <signin-form>
-            <form-data>
-                <username>QWE</username>
-                <password>ASD</password>
-            </form-data>
-        </signin-form>
+        <set-button xmlns="" value="#dce4" slice="set-button" slice-event="click" data-dce-id="2" validation-message="">
+            <event isTrusted="true" sliceProcessed="1" pointerId="1" width="1" height="1" pressure="0" tiltX="0"
+                   tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0"
+                   pointerType="mouse" isPrimary="false" screenX="47" screenY="538" clientX="47" clientY="451"
+                   ctrlKey="false" shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="47"
+                   pageY="451" x="47" y="451" offsetX="20" offsetY="8" movementX="0" movementY="0" layerX="47"
+                   layerY="451" detail="1" which="1" type="click" eventPhase="2" bubbles="true" cancelable="true"
+                   defaultPrevented="false" composed="true" timeStamp="11628.100000143051" returnValue="true"
+                   cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
+                <relatedTarget/>
+                <fromElement/>
+                <toElement/>
+                <sourceCapabilities firesTouchEvents="false"/>
+            </event>
+            #dce4
+        </set-button>
     </slice>
 </datadom>

package/demo/s.xslt

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
                 xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
                 exclude-result-prefixes="exsl">
@@ -15,39 +14,77 @@
     </xsl:template>
     <xsl:template mode="payload" match="attributes">
         <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <u xmlns="" data-dce-id="2">
-                <dce-text data-dce-id="3">
-                    <xsl:call-template name="slot">
-                        <xsl:with-param name="slotname" select="''"/>
-                        <xsl:with-param name="defaultvalue">
-                            <dce-text xmlns="" data-dce-id="4">is green</dce-text>
-                        </xsl:with-param>
-                    </xsl:call-template>
-                </dce-text>
-            </u>
+            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="methods">
+                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href" data-dce-id="2">
+                    location.href
+                </a>
+                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" data-dce-id="3">
+                    location.hash
+                </a>
+                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign" data-dce-id="4">
+                    location.assign
+                </a>
+            </xsl:variable>
+            <fieldset xmlns="" data-dce-id="5">
+                <legend data-dce-id="6">
+                    <b data-dce-id="7">set-by</b>
+                </legend>
+                <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="$methods">
+                    <p data-dce-id="8">
+                        <label data-dce-id="9">
+                            <input type="radio" name="method" value="{.}" data-dce-id="10"/>
+                            <dce-text data-dce-id="11">
+                                <xsl:value-of select="."/>
+                            </dce-text>
+                        </label>
+                        <a class="infolink" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
+                           data-dce-id="12">mdn
+                        </a>
+                    </p>
+                </xsl:for-each>
+                <label data-dce-id="13">
+                    <input type="radio" name="method" value="location.href" data-dce-id="14"/>
+                    <dce-text data-dce-id="15">location.href</dce-text>
+                </label>
+                <label data-dce-id="16">
+                    <input type="radio" name="method" value="location" data-dce-id="17"/>
+                    <dce-text data-dce-id="18">location</dce-text>
+                </label>
+                <label data-dce-id="19">
+                    <input type="radio" name="method" value="location.replace" data-dce-id="20"/>
+                    <dce-text data-dce-id="21">location.replace</dce-text>
+                </label>
+                <label data-dce-id="22">
+                    <input type="radio" name="method" value="location.assign" data-dce-id="23"/>
+                    <dce-text data-dce-id="24">location.assign</dce-text>
+                </label>
+                <label data-dce-id="25">
+                    <input type="radio" name="method" value="location.hash" data-dce-id="26"/>
+                    <dce-text data-dce-id="27">location.hash</dce-text>
+                </label>
+                <label data-dce-id="28">
+                    <input type="radio" name="method" value="history.pushState" data-dce-id="29"/>
+                    <dce-text data-dce-id="30">history.pushState</dce-text>
+                </label>
+                <label data-dce-id="31">
+                    <input type="radio" name="method" value="history.replaceState" data-dce-id="32"/>
+                    <dce-text data-dce-id="33">history.replaceState</dce-text>
+                </label>
+            </fieldset>
         </dce-root>
     </xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
-
-    <xsl:template match="@*|node()" mode="copy-html">
-      <xsl:copy><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:copy>
-    </xsl:template>
-    <xsl:template match="node()[starts-with(name(),'xhtml:')]" mode="copy-html">
-      <xsl:element name="{local-name()}"><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:element>
-    </xsl:template>
-
-
     <xsl:template name="slot">
         <xsl:param name="slotname"/>
         <xsl:param name="defaultvalue"/>
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:apply-templates mode="copy-html" select="//payload/*[@slot=$slotname]"/>
+                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
-                <xsl:apply-templates mode="copy-html" select="$defaultvalue"/>
+                <xsl:copy-of select="$defaultvalue"/>
             </xsl:otherwise>
         </xsl:choose>
     </xsl:template>

package/demo/set-url.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<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>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        input[type="text"]{ min-width: 30rem; }
+
+        .infolink {
+            &:before {
+                content: '❔';
+                display: inline-block;
+                border-radius: 1.2em;
+            }
+
+            &:hover:before {
+                background: blue;
+            }
+        }
+    </style>
+</head>
+<body>
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+</nav>
+<main>
+    <h3>How to set the page URL by location-element?</h3>
+    Answer: by defining following attributes:
+    <ol>
+        <li><code>method</code> to one of values provided bellow</li>
+        <li><code>src</code> with URL </li>
+    </ol>
+    <p> &lt;location-element&gt; is safe to be used unconditionally as long as `src` is missing or same as page URL.
+        Otherwise it can be injected by event driven condition as in sample <a href="#dce3">#3</a> </p>
+</main>
+<html-demo-element legend="1. Set the page URL by location.hash"
+                   description="click on 'set' button and observe hash value change in url"
+                   id="dce1">
+    <template>
+        <custom-element>
+            <template>
+                <button value="#dce1" slice="set-button" slice-event="click">#dce1</button>
+                <button value="#dce2" slice="set-button" slice-event="click">#dce2</button>
+                <location-element method="location.href" src="{//set-button/@value}"></location-element>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2. Set the page URL by method"
+                   description="click on 'set' button and observe hash value change in url"
+                   id="dce2">
+    <template>
+        <custom-element>
+            <template>
+                <style>
+                    button{ display: block; width: 100%; }
+                </style>
+                <button value="location.href"           slice="set-button" slice-event="click"> location.href        </button>
+                <button value="location.hash"           slice="set-button" slice-event="click"> location.hash        </button>
+                <button value="location.assign"         slice="set-button" slice-event="click"> location.assign      </button>
+                <button value="location.replace"        slice="set-button" slice-event="click"> location.replace     </button>
+                <button value="history.pushState"       slice="set-button" slice-event="click"> history.pushState    </button>
+                <button value="history.replaceState"    slice="set-button" slice-event="click"> history.replaceState </button>
+                <location-element method="{//set-button/@value}" src="#dce2"></location-element>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. Set the page URL by location.href in conditionally injected location-element"
+                   description="click on 'set' button and observe in url #dce3"
+                   id="dce3">
+    <p>Has to produce URL properties</p>
+    <template>
+        <custom-element>
+            <template>
+                <button value="#dce3" slice="set-button" slice-event="click">set</button>
+                <if test="//set-button/@slice-event">
+                    <location-element method="location.href" src="#dce3"></location-element>
+                    look for <b>#dce3</b> in URL which is set by <code>location-element</code>
+                </if>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="4. Set page URL methods"
+                   description="To define the URL, fill input field or click the radio button, then 'set' button. "
+                   id="dce4">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="methods">
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href"
+                       title="./set-url.html?a=A">location.href</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"
+                       title="#dec4">location.hash</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
+                       title="./set-url.html?assign=1">location.assign</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/replace"
+                       title="./set-url.html?replace=location">location.replace</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/pushState"
+                       title="./set-url.html?history=pushState">history.pushState</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState"
+                       title="./set-url.html?history=replaceState">history.replaceState</a>
+                </xsl:variable>
+                <form slice="url-form" custom-validity="'invalid'" method="post">
+                    <fieldset>
+                        <legend><b>set-by</b></legend>
+                        <for-each select="exsl:node-set($methods)/*">
+                            <p><label><input type="radio" name="method" value="{.}"/> {.} </label>
+                                <a class="infolink" href="{@href}">mdn</a>
+                            </p>
+                        </for-each>
+                    </fieldset>
+                    <variable name="selected-method" select="//form-data/method/text()"></variable>
+                    <variable name="selected-url"
+                              select="exsl:node-set($methods)/*[text() = $selected-method ]/@title"></variable>
+
+                    <label><input name="url" value="{//url ?? $selected-url }" type="text"/></label>
+                    <button name="submit-btn" value="by-submit" type="submit">set</button>
+                    <if test="//form-data/url">
+                        <location-element method="{$selected-method}" src="{//form-data/url}"></location-element>
+                        {$selected-method} = {//form-data/url}
+                    </if>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/ide/customData-dce.json

@@ -120,6 +120,62 @@
           "url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events"
         }
       ]
+    },
+    {
+      "name": "location-element",
+      "description": "get/set window URL parts or from SRC URL",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "url to be parsed. When omitted window.location is used.",
+          "type": "string",
+          "references": [
+            {
+              "name": "MDN docs",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/API/Location/href"
+            }
+          ]
+        },
+        {
+          "name": "live",
+          "description": "monitors history change, applicable only when href is omitted.",
+          "type": "string",
+          "references": [
+            {
+              "name": "docs",
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/location-element.html"
+            }
+          ]
+        },
+        {
+          "name": "src",
+          "description": "sets the window URL",
+          "type": "string",
+          "references": [
+            {
+              "name": "docs",
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html"
+            }
+          ]
+        },
+        {
+          "name": "method",
+          "description": "when defined, changes URL by one of predefined methods.",
+          "type": "string",
+          "references": [
+            {
+              "name": "docs",
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "docs",
+          "url": "https://github.com/EPA-WG/custom-element"
+        }
+      ]
     }
   ]
 }

package/ide/web-types-dce.json

@@ -1,116 +1,159 @@
 {
-  "$schema": "http://json.schemastore.org/web-types",
-  "name": "@epa-wg/custom-element",
-  "version": "0.0.24",
-  "js-types-syntax": "typescript",
-  "description-markup": "markdown",
-  "contributions": {
-    "html": {
-      "attributes": [
-        {
-          "name": "slice",
-          "description": "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",
-          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
-        },
-        {
-          "name": "slice-event",
-          "description": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event",
-          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
-        },
-        {
-          "name": "custom-validity",
-          "description": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission.",
-          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
-        },
-        {
-          "name": "slice-value",
-          "description": "XPath expression to populate into the slice",
-          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
-        }
-      ],
-      "elements": [
-        {
-          "name": "custom-element",
-          "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
-          "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#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.",
-              "required": false,
-              "doc-url": "https://developer.mozilla.org/en-US/docs/web/html/global_attributes/hidden",
-              "value": {
-                "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. ",
-              "default": "",
-              "required": false,
-              "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#tag-attribute",
-              "value": {
-                "type": "string"
-              }
-            },
-            {
-              "name": "src",
-              "description": "full, relative, or hash URL to DCE template.",
-              "default": "",
-              "required": false,
-              "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#src-attribute",
-              "value": {
-                "type": "URL"
-              }
-            }
-          ],
-          "slots": [],
-          "js": {
-            "events": [
-              {
-                "name": "value:changed",
-                "description": "Emitted when data changes. Can be used for state serialization in hydration flow"
-              }
+    "$schema": "http://json.schemastore.org/web-types",
+    "name": "@epa-wg/custom-element",
+    "version": "0.0.25",
+    "js-types-syntax": "typescript",
+    "description-markup": "markdown",
+    "contributions": {
+        "html": {
+            "attributes": [
+                {
+                    "name": "slice",
+                    "description": "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",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
+                },
+                {
+                    "name": "slice-event",
+                    "description": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
+                },
+                {
+                    "name": "custom-validity",
+                    "description": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission.",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
+                },
+                {
+                    "name": "slice-value",
+                    "description": "XPath expression to populate into the slice",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
+                }
             ],
-            "properties": [
-              {
-                "name": "value",
-                "type": "string",
-                "default": "",
-                "description": "DCE state. Can be used for state serialization in hydration flow. Format TBD, most likely encoded XML string"
-              }
-            ]
-          },
-          "css": {
-            "properties": [
-            ]
-          }
-        },
-        {
-          "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"
-              }
-            }
-          ]
-        },
-        {
-          "name": "slice",
-          "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
-          "doc-url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events",
-          "attributes": [
+            "elements": [
+                {
+                    "name": "custom-element",
+                    "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
+                    "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#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.",
+                            "required": false,
+                            "doc-url": "https://developer.mozilla.org/en-US/docs/web/html/global_attributes/hidden",
+                            "value": {
+                                "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. ",
+                            "default": "",
+                            "required": false,
+                            "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#tag-attribute",
+                            "value": {
+                                "type": "string"
+                            }
+                        },
+                        {
+                            "name": "src",
+                            "description": "full, relative, or hash URL to DCE template.",
+                            "default": "",
+                            "required": false,
+                            "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#src-attribute",
+                            "value": {
+                                "type": "URL"
+                            }
+                        }
+                    ],
+                    "slots": [ ],
+                    "js": {
+                        "events": [
+                            {
+                                "name": "value:changed",
+                                "description": "Emitted when data changes. Can be used for state serialization in hydration flow"
+                            }
+                        ],
+                        "properties": [
+                            {
+                                "name": "value",
+                                "type": "string",
+                                "default": "",
+                                "description": "DCE state. Can be used for state serialization in hydration flow. Format TBD, most likely encoded XML string"
+                            }
+                        ]
+                    },
+                    "css": {
+                        "properties": [
+                        ]
+                    }
+                },
+                {
+                    "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"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "location-element",
+                    "description": "get/set window URL parts or from SRC URL",
+                    "doc-url": "https://github.com/EPA-WG/custom-element",
+                    "attributes": [
+                        {
+                            "name": "href",
+                            "description": "url to be parsed. When omitted window.location is used.",
+                            "required": false,
+                            "doc-url": "https://developer.mozilla.org/en-US/docs/Web/API/Location/href",
+                            "value": {
+                                "type": "string"
+                            }
+                        },
+                        {
+                            "name": "live",
+                            "description": "monitors history change, applicable only when href is omitted.",
+                            "required": false,
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/location-element.html",
+                            "value": {
+                                "type": "string"
+                            }
+                        },
+                        {
+                            "name": "src",
+                            "description": "sets the window URL",
+                            "required": false,
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html",
+                            "value": {
+                                "type": "string"
+                            }
+                        },
+                        {
+                            "name": "method",
+                            "description": "when defined, changes URL by one of predefined methods.",
+                            "required": false,
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html",
+                            "value": {
+                                "type": "string"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "slice",
+                    "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
+                    "doc-url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events",
+                    "attributes": [
 
-          ]
+                    ]
+                }
+            ]
         }
-      ]
     }
-  }
 }

package/ide/web-types-xsl.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.24",
+    "version": "0.0.25",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/index.html

@@ -30,6 +30,7 @@
         <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/set-url.html"           >set-url            </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> |

package/location-element.js

@@ -16,6 +16,15 @@ function ensureTrackLocationChange()
         }
     });
 }
+const methods =
+{   'location.href'         : src => window.location.href = src
+,   'location.hash'         : src => window.location.hash = src
+,   'location.assign'       : src => window.location.assign( src )
+,   'location.replace'      : src => window.location.replace( src )
+,   'history.pushState'     : src => window.history.pushState( {}, "", src )
+,   'history.replaceState'  : src => window.history.replaceState( {}, "", src )
+};
+
 
 export class LocationElement extends HTMLElement
 {
@@ -25,6 +34,8 @@ export class LocationElement extends HTMLElement
             ,   'href'  // url to be parsed. When omitted window.location is used.
             ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
             ,   'live' // monitors history change, applicable only when href is omitted.
+            ,   'src' // sets the URL
+            ,   'method' // when defined, changes URL by one of predefined methods.
             ];
 
     constructor()
@@ -53,6 +64,17 @@ export class LocationElement extends HTMLElement
         };
         this.sliceInit = s =>
         {
+            if( this.hasAttribute('method') )
+            {
+                const method = this.getAttribute('method');
+                const src = this.getAttribute('src');
+                if( method && src )
+                    if( method === 'location.hash' )
+                    {   if( src !== window.location.hash )
+                            methods[ method ]?.( src );
+                    }else if( window.location.href !== new URL(src, window.location).href )
+                        methods[method]?.(src);
+            }
             if( !state.listener && this.hasAttribute('live') )
             {   state.listener = 1;
                 window.navigation?.addEventListener("navigate", listener );
@@ -74,8 +96,9 @@ export class LocationElement extends HTMLElement
     }
     attributeChangedCallback(name, oldValue, newValue)
     {
-        if('href'!== name)
-            return;
+        if('href'!== name && 'method' !== name && 'src' )
+            if( !['method','src','href'].includes(name) )
+                return;
         this.sliceInit && this.sliceInit();
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.24",
+    "version": "0.0.25",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",