How to get the page URL by location-element?

Answer: by defining following attributes:
  1. slice to one of values provided bellow
  2. src optionally with URL, If omitted, it would match the window.location.href
URL properties would be a part of slice data.

Set page URL demo

Change window URL

use browser URL bar or those controls to change the page URL

        <a href="#dce2">#dce2</a>
        <form method="get">
            <input name="p1" value="abc">
            <input name="p2" value="def">
            <input type="submit" value="params">
        </form>
        <button onclick="history.pushState( {},'', 'location-element.html?pushstate')">history.pushState</button>
        <button onclick="history.replaceState( {},'', 'location-element.html?replaceState#dce1')">history.replaceState</button>
#dce2

1. window.location live update

Change the window URL via link or history change by controls in #1. Observe the changes detected by location-element slice.

Has to produce URL properties


        <custom-element tag="dce-2" hidden="">
            <template>

                <location-element slice="window-url" live="" method="" src=""></location-element>

                <xhtml:table>
                    <xhtml:tbody>
                        <xhtml:tr>
                            <xhtml:th><h3> URL properties </h3></xhtml:th>
                            <xhtml:td>{count(//value/@*)}</xhtml:td>
                        </xhtml:tr>
                        <apply-templates mode="attrs" select="//value/@*"></apply-templates>
                    </xhtml:tbody>
                </xhtml:table>
                <xhtml:table>
                        <h3> URL parameters </h3>
                        <apply-templates mode="attrs" select="//params/*/*"></apply-templates>
                </xhtml:table>
                <xsl:template mode="attrs" match="*|@*">
                    <xhtml:tr>
                        <xhtml:th>{name()}</xhtml:th>
                        <xhtml:td>{.}</xhtml:td>
                    </xhtml:tr>
                </xsl:template>
            </template>
        </custom-element>
        <dce-2>?</dce-2>

URL properties

9
href https://unpkg.com/@epa-wg/custom-element@0.0.33/demo/location-element.html
origin https://unpkg.com
protocol https:
host unpkg.com
hostname unpkg.com
port
pathname /@epa-wg/custom-element@0.0.33/demo/location-element.html
search
hash

URL parameters

2. window.location simplest

location read only during initial and only render, does not track the changes.

Has to produce URL properties


        <custom-element tag="dce-1" hidden="">
            <template>

                <location-element slice="window-url"></location-element>

                <xhtml:table>
                    <xhtml:tbody>
                        <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
                        <for-each select="//slice/window-url/value/@*">
                            <xhtml:tr>
                                <xhtml:th>{name()}</xhtml:th>
                                <xhtml:td>{.}</xhtml:td>
                            </xhtml:tr>
                        </for-each>
                    </xhtml:tbody>
                    <xhtml:tbody>
                        <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
                        <for-each select="//slice/window-url/value/params/*">
                            <xhtml:tr>
                                <xhtml:th>{name()}</xhtml:th>
                                <xhtml:td>{.}</xhtml:td>
                            </xhtml:tr>
                        </for-each>
                    </xhtml:tbody>
                </xhtml:table>
            </template>
        </custom-element>
        <dce-1>?</dce-1>

URL properties

href https://unpkg.com/@epa-wg/custom-element@0.0.33/demo/location-element.html
origin https://unpkg.com
protocol https:
host unpkg.com
hostname unpkg.com
port
pathname /@epa-wg/custom-element@0.0.33/demo/location-element.html
search
hash

URL parameters

3. External URL as HREF attribute

url parsed and populated into slice.

Has to produce URL properties


        <custom-element tag="dce-3" hidden="">
            <template>

                <location-element slice="href-url" href="https://my.example?a=1&amp;b=2#3"></location-element>

                <xhtml:table>
                    <xhtml:tbody>
                        <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
                        <for-each select="//slice/href-url/value/@*">
                            <xhtml:tr>
                                <xhtml:th>{name()}</xhtml:th>
                                <xhtml:td>{.}</xhtml:td>
                            </xhtml:tr>
                        </for-each>
                    </xhtml:tbody>
                    <xhtml:tbody>
                        <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
                        <for-each select="//slice/href-url/value/params/*">
                            <xhtml:tr>
                                <xhtml:th>{name()}</xhtml:th>
                                <xhtml:td>{.}</xhtml:td>
                            </xhtml:tr>
                        </for-each>
                    </xhtml:tbody>
                </xhtml:table>
            </template>
        </custom-element>
        <dce-3>?</dce-3>

URL properties

origin https://my.example
protocol https:
username
password
host my.example
hostname my.example
port
pathname /
search ?a=1&b=2
hash #3
href https://my.example/?a=1&b=2#3

URL parameters

array 1
array 2