1. reference the template in page DOM

        <template id="template1">
            <slot> Hello</slot>
            World!
        </template>

        <custom-element tag="dce-internal" src="#template1"></custom-element>
        <!-- no need for loading fallback as the template exists -->

        <dce-internal>👋</dce-internal>
        <dce-internal></dce-internal>
    

2. without TAG, inline instantiation

        <template id="template2">
            🏗️ construction
        </template>

        <custom-element src="#template2"></custom-element>
        <custom-element src="#template2"></custom-element>
    

3. external SVG file

        <custom-element tag="dce-external" src="confused.svg">
            <template><i>loading from SVG ...</i></template>
        </custom-element>
        <dce-external></dce-external>
        <custom-element src="confused.svg">
            <i>inline DCE loading from SVG ...</i>
        </custom-element>
        <custom-element src="no.svg">
            <i>fallback for missing image</i>
        </custom-element>
    

4. external XSLT file

        <custom-element tag="dce-external-4" src="tree.xsl">
            <template><i>loading from XSLT ...</i></template>
        </custom-element>
        <dce-external-4 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-4>
        <custom-element src="tree.xsl" data-smile="👼" data-basket="🍒">
            <i>inline DCE loading from XSLT ...</i>
        </custom-element>
    

5. external HTML template

        <custom-element tag="dce-external-5" src="html-template.html">
            <template><i>loading from HTML file ...</i></template>
        </custom-element>
        <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
        <custom-element src="html-template.html" data-smile="👼" data-basket="🍒">
            <i>inline DCE loading from HTML file ...</i>
        </custom-element>
    

6. HTML, SVG by ID within external file

        <custom-element src="./html-template.html#wave">
            <template><i>loading HTML from templates file ...</i></template>
        </custom-element>
        <custom-element src="./html-template.html#dwc-logo">
            <template><i>loading SVG from templates file ...</i></template>
        </custom-element>
        <custom-element src="./html-template.html#sophomores-dream">
            <template><i>loading MathML from HTML file ...</i></template>
        </custom-element>
    

7. XSLT by ID within external file

        <custom-element src="html-template.xhtml#embedded-xsl">
            <template>whole XSLT is embedded into HTML body</template>
        </custom-element>
        <custom-element src="html-template.html#none">
            <template><i>element with id=none is missing in template</i></template>
        </custom-element>
    

8. external file with embedding of another external DCE

        <custom-element src="embed-1.html">
            loading from embed-1.html ...
        </custom-element>
    

9. external file with invoking of relative template as hash by enclosed custom-element

        <custom-element src="./lib-dir/embed-lib.html#embed-relative-hash">
            loading from embed-1.html ...
        </custom-element>
    

10. external file with invoking of template in another relative path file by enclosed custom-element

        <custom-element src="./lib-dir/embed-lib.html#embed-relative-file">
            loading from ./lib-dir/embed-lib.html ...
        </custom-element>
    

embed-1.html external file

embed-lib.html with multiple templates