1. http-request simplest

<custom-element tag="dce-1" hidden="">
    <template><!-- wrapping into template to prevent images loading within DCE declaration -->
        <http-request url="https://pokeapi.co/api/v2/pokemon?limit=6&amp;offset=0" slice="page" method="GET" header-accept="application/json"></http-request>
        <xsl:for-each select="//slice/page/data/results/*">
            <xsl:variable name="slides-url">https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</xsl:variable>
            <xsl:variable name="pokeid" select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"></xsl:variable>
            <button>
                <img src="{$slides-url}/{$pokeid}.svg" alt="{@name}">
                <xsl:value-of select="@name">
            </xsl:value-of></button>
        </xsl:for-each>
    </template>
</custom-element>
<dce-1></dce-1>
    

1. http-request headers

            <custom-element tag="headers-demo" hidden="">
<http-request url="https://pokeapi.co/api/v2/pokemon?offset=6&amp;limit=6" slice="request_slice" type="text" mode="cors" header-x-test="testing"></http-request>
Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
from <code>${url}</code>

<h3>Samples</h3>
<table>
<tbody><tr><th>//slice/request_slice/request/headers/@mode</th>
    <td><xsl:value-of select="//slice/request_slice/request/@mode"></xsl:value-of></td></tr>
<tr><th>//slice/request_slice/response/headers/@content-type</th>
    <td><xsl:value-of select="//slice/request_slice/response/headers/@content-type"></xsl:value-of></td></tr>
<tr><th>//slice/request_slice/response/@status</th>
    <td><xsl:value-of select="//slice/request_slice/response/@status"></xsl:value-of></td></tr>
</tbody></table>
<xsl:for-each select="//slice/request_slice/*">
    <ul data-request-section="{name(.)}">
        <b data-testid="request-section"><xsl:value-of select="name(.)"></xsl:value-of></b>
        <xsl:for-each select="@*">
            <div>
                <var data-testid="section-attribute">@<xsl:value-of select="local-name(.)"></xsl:value-of></var>
                =
                <code><xsl:value-of select="."></xsl:value-of></code>
            </div>
        </xsl:for-each>
        <xsl:for-each select="*">
            <div>
                <b data-testid="section-deep"><xsl:value-of select="local-name(.)"></xsl:value-of></b>
                <ul>
                    <xsl:for-each select="@*">
                        <li>
                            <var data-testid="section-attribute">@<xsl:value-of select="local-name(.)"></xsl:value-of></var>
                            =
                            <code><xsl:value-of select="."></xsl:value-of></code>
                        </li>
                    </xsl:for-each>
                    <code><xsl:value-of select="."></xsl:value-of></code>
                </ul>
            </div>
        </xsl:for-each>
    </ul>
</xsl:for-each>
            </custom-element>
            <headers-demo></headers-demo>