slotted-element with template demo

1. Inline HTML

    <slotted-element>
        <h6>inline HTML with slots 🎉</h6>
        <p slot="loading"> Not triggered as "src" attribute is not set. </p>
    </slotted-element>

2. Template defined by ID

        <h6>template HTML with slots 🥳</h6>
        <slot name="slot0" hidden="">
            Slots are hidden in template when "hidden" attribute is set.
            Could be shown by slotsAdd() method.
        </slot>
        <slot name="slot1"> slot1 is visible, hide by setting "hidden" attribute </slot>
        <slot name="slot3"></slot>
    

template HTML with slots 🥳

2a. Template defined by ID, slots redefined in body.

        <h6>template by ID, inline HTML redefines slots 🥳</h6>
        <slot name="slot0">slot0 in template would be overridden.  </slot>
        <slot name="slot1">slot1 is defined in template.  </slot>
    

template by ID, inline HTML redefines slots 🥳

3. template defined as property getter

    <demo3-element>
        <p slot="slot0">slot0 is overridden in body!</p>
    </demo3-element>
    <script type="module">
        import SlottedElement from '../slotted-element.js';
        window.customElements.define('demo3-element',
            class Demo3Element extends SlottedElement
            {
                get template()
                {
                    return `<h6>${this.nodeName}, inline HTML redefines slots 🥳</h6>
                            <slot name="slot0">slot0 in template would be overridden.  </slot>
                            <slot name="slot1">slot1 is defined in template.  </slot>
                            `;
                }
            });
    </script>

3a. template defined as instance set property

    <slotted-element id="demo3a">
        <p slot="slot0">slot0 is overridden in body!</p>
    </slotted-element>
    <script type="module">
        window.addEventListener('load', () =>
        {
            demo3a.template = `<h6>template set by external JS on instance 🥳</h6>
                                <slot name="slot0">slot0 in template would be overridden.  </slot>
                                <slot name="slot1">slot1 is defined in template.  </slot>
                                `;
            demo3a.slotsInit();
        });
    </script>