fetch-element render from JSON demo

git | slotted-element demo

Custom renderer


        <json-render-element src="doc.json"></json-render-element>
        <script type="module">
            import FetchElement from '../fetch-element.js';
            window.customElements.define('json-render-element',
                class JsonElement extends FetchElement
                {
                    render(json)
                    {
                        return `<h1>${ json.name }</h1>
                                <img src="${ json.portrait }" alt="" />
                                `;
                    }
                });
        </script>
    

Default as table


        <fetch-element src="doc.json"></fetch-element>
    

Array as table


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

dwarfs.json

doc.json