How to set the page URL by location-element?

Answer: by defining following attributes:
  1. method to one of values provided bellow
  2. src with URL

<location-element> 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 #3

1. Set the page URL by location.hash

click on 'set' button and observe hash value change in url

        <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>

2. Set the page URL by method

click on 'set' button and observe hash value change in url

        <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>

3. Set the page URL by location.href in conditionally injected location-element

click on 'set' button and observe in url #dce3

Has to produce URL properties


        <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>

4. Set page URL methods

To define the URL, fill input field or click the radio button, then 'set' button. 

        <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>
set-by

mdn

mdn

mdn

mdn

mdn

mdn