59 lines
1.8 KiB
HTML
59 lines
1.8 KiB
HTML
<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>
|