slotted-element is web component implementing slots without shadow DOM. It is based on fetch-element component to fetch data and render from retrieved JSON or HTML.

From url


    <slotted-element src="embedded.html"></slotted-element>

From embedded.html 😏

Error case


    <slotted-element src="https://badUrl.heck">
        <p slot="loading" hidden="">Loading... ⏳ </p>
        <p slot="error" hidden="">Something went wrong. 😭 </p>
    </slotted-element>

Something went wrong. 😭

Content would be placed inside of 'loaded' slot


    <slotted-element src="embedded.html">
        <fieldset>
            <legend> Slots located in wrapper </legend>
            <p slot="loading" hidden=""> Loading... ⏳ </p>
            <p slot="error" hidden=""> What could be wrong? </p>
            <p slot="loaded" hidden=""> Replaced with content of <b>embedded.html</b> </p>
        </fieldset>
    </slotted-element>

Slots located in wrapper

Loading... ⏳

From embedded.html 😏

From key:value JSON


    <slotted-element src="doc.json">
        <fieldset>
            <legend> <b>doc.json</b> as table </legend>
            <p slot="loaded" hidden="">  </p>
        </fieldset>
    </slotted-element>

doc.json as table

array dwarfs.json as table


    <slotted-element src="dwarfs.json"></slotted-element>

src is image confused.svg