1. simple payload

        <custom-element tag="dce-link" hidden="">
          <a href="#">link 😃</a>
        </custom-element>
        <dce-link><i>🍋</i></dce-link>
    

2. payload with slot definition and slot value

        <custom-element tag="dce-1-slot" hidden="">
           🐇❤️<slot name="slot1"> 🥦</slot>
        </custom-element>
        <dce-1-slot><i slot="slot1">🥕</i></dce-1-slot>
    

2a. payload with slot definition and slot value

        <custom-element tag="dce-2-slots" hidden="">
           <slot name="slot2"> 😃</slot> and again:
           <slot name="slot2"> 😃</slot>
            <xhtml:input placeholder="🐇❤️{//*[@slot='slot2']}">
        </xhtml:input></custom-element>
        <dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
        <dce-2-slots></dce-2-slots>
    

2b. named default slot

        <custom-element tag="dce-3-slot" hidden="">
           #1
            <slot name=""> 😃</slot>
           and
           <slot> 😃</slot>
        </custom-element>
        <dce-3-slot><i slot="">🥕</i></dce-3-slot>
    

2c. named default slot

        <custom-element tag="dce-4-slot" hidden="">
           #2
            <slot name=""> 😃</slot>
           and
           <slot> 😃</slot>
        </custom-element>
        <dce-4-slot>🥕</dce-4-slot>
    

2d. default slot

        <custom-element tag="greet-element" hidden="">
          <slot> Hello </slot> World!
        </custom-element>
        <greet-element></greet-element>
        <greet-element>👋</greet-element>
    

3. 💪 DCE template

        <custom-element tag="pokemon-tile" hidden="" id="shared-template">
            <template>
                <h3> {title} </h3>           <!-- title is an attribute in instance
                                                  mapped into /*/attributes/title -->
                <if test="//smile">      <!-- data-smile DCE instance attribute,
                                                  mapped into /*/dataset/smile
                                                  used in condition -->
                                             <!-- data-smile DCE instance attribute, used as HTML -->
                    <div>Smile as: {//smile}</div> <!-- /datadom/dataset/smile -->
                </if>
                <!-- image would not be visible in sandbox, see live demo -->
                <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg" alt="{title} image">
                                                        <!-- image-src and title are DCE instance attributes,
                                                             mapped into /*/attributes/
                                                             used within output attribute via curly brackets -->

                                                        <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
                <p><slot name="description"><i>description is not available</i></slot></p>
                <for-each select="//*[@pokemon-id]">
                                                        <!-- loop over payload elements with `pokemon-id` attribute,
                                                            i.e LI elements -->
                    <button>
                        <img height="32" src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg" alt="{text()}">
                        <br>
                        {text()} <!-- text from LI element in loop -->
                    </button>

                </for-each>
            </template>
        </custom-element>

        <pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1">
            <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
                the seed grows in size as the Pokémon  does.</p>
            <ul>
                <li pokemon-id="2">ivysaur</li>
                <li pokemon-id="3">venusaur</li>
            </ul>
        </pokemon-tile>

        <pokemon-tile title="ninetales" pokemon-id="38">
                <li pokemon-id="37">vulpix</li>
        </pokemon-tile>