first commit

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

@@ -0,0 +1,58 @@
+<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>