dom-to-image-more/spec/resources/shadow-dom/dom-node.html

Generates an image from a DOM node using HTML5 canvas and SVG

<summary-display>
    <ul slot="master-list">
        <li class="selected">Apples</li>
        <li>Pears</li>
        <li>Bananas</li>
        <li>Oranges</li>
        <li>Peaches</li>
        <li>Strawberries</li>
        <li>Blueberries</li>
    </ul>

    <p slot="choice" data-name="Apples">
        A common, sweet, crunchy fruit, usually green or yellow in color.
    </p>
    <p data-name="Pears">
        A fairly common, sweet, usually green fruit, usually softer than Apples.
    </p>
    <p data-name="Bananas">A long, curved, yellow fruit, with a fairly gentle flavor.</p>
    <p data-name="Oranges">
        Orange in color, usually sweet but can be sharp, often contains pips.
    </p>
    <p data-name="Peaches">
        An orange fruit with big stone in the middle, and sweet, juicy flesh.
    </p>
    <p data-name="Strawberries">
        A red fruit with yellow seeds on the outside; has a sweet flavor and a pretty
        shape.
    </p>
    <p data-name="Blueberries">
        They are berries and they are blue; sweet in flavor, small in size, round.
    </p>
</summary-display>

<template id="summary-display-template">
    <article>
        <div>
            <slot name="master-list"></slot>
        </div>
        <div>
            <slot name="choice"></slot>
        </div>
    </article>
</template>

<script>
    customElements.define(
        'summary-display',
        class extends HTMLElement {
            constructor() {
                super();
                const template = document.getElementById('summary-display-template');
                const templateContent = template.content;
                const shadowRoot = this.attachShadow({ mode: 'open' });
                shadowRoot.appendChild(templateContent.cloneNode(true));
            }
        }
    );
</script>