slotchange

// src/components/slotchange/mocks.json

{
  "entries": [
    {
      "name": "Apples",
      "text": "A common, sweet, crunchy fruit, usually green or yellow in color."
    },
    {
      "name": "Pears",
      "text": "A fairly common, sweet, usually green fruit, usually softer than Apples."
    },
    {
      "name": "Bananas",
      "text": "A long, curved, yellow fruit, with a fairly gentle flavor."
    },
    {
      "name": "Oranges",
      "text": "Orange in color, usually sweet but can be sharp, often contains pips."
    },
    {
      "name": "Peaches",
      "text": "An orange fruit with big stone in the middle, and sweet, juicy flesh."
    },
    {
      "name": "Strawberries",
      "text": "A red fruit with yellow seeds on the outside; has a sweet flavor and a pretty shape."
    },
    {
      "name": "Blueberries",
      "text": "They are berries and they are blue; sweet in flavor, small in size, round."
    }
  ]
}

// src/components/slotchange/index.hbs

<summary-display>
  <ul slot="master-list">
    {{#each entries}}
    <li>{{this.name}}</li>
    {{/each}}
  </ul>

  {{#each entries}}
  <p data-name="{{this.name}}">{{this.text}}</p>
  {{/each}}
</summary-display>

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