0. url from text to http-request

        <custom-element>
            <template>

                <button slice="url-string" slice-value="''" slice-event="click">⬇️set blank</button>
                <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=6</button>
                <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=3'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=3</button>
                <input slice="url-string" value="{ //url-string ?? '' }" style="width:100%">
                <button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
                <http-request url="{//fetch-url}" slice="request_slice" type="text" mode="cors"></http-request>
                <code>//fetch-url</code> from <code>{//fetch-url}</code><br>
                <ul><for-each select="//results">
                    <li>{@name}</li>
                </for-each></ul>
            </template>
        </custom-element>
    

1. http-request simplest

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

2. http-request response and headers

        <custom-element url="https://pokeapi.co/api/v2/pokemon?offset=6&amp;limit=6">
            <template> <!-- IMPORTANT! to wrap DCE payload into template to avoid
                               http-request initializing out of instance -->
                <attribute name="url"></attribute>
                <http-request url="{url}" 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/value/request/@mode  </th>
                        <td>{ //slice/request_slice/value/request/@mode }</td></tr>
                    <tr><th>  //slice/request_slice/value/response/headers/@content-type  </th>
                        <td>{ //slice/request_slice/value/response/headers/@content-type }</td></tr>
                    <tr><th>  //slice/request_slice/value/response/@status  </th>
                        <td>{ //slice/request_slice/value/response/@status }</td></tr>
                </tbody></table>
                <apply-templates mode="display" select="//slice/request_slice/value/*"></apply-templates>
                <xsl:template mode="display" match="*">
                    <fieldset>
                        <legend> {local-name(.)} </legend>
                        <ul>
                            <for-each select="@*">
                                <li>
                                    <var data-testid="section-attribute">@{local-name(.)}</var>
                                    =
                                    <code><value-of select="."></value-of></code>
                                </li>
                            </for-each>
                        </ul>
                        <apply-templates mode="display" select="*"></apply-templates>
                    </fieldset>
                </xsl:template>
            </template>
        </custom-element>