<div id="app">
  <h2>沒有插槽可替換的狀態</h2>
  <no-slot-component></no-slot-component>

  <h2>Slot 基礎範例</h2>
  <p>替換前</p>
  <single-slot-component></single-slot-component>
  <p>替換後</p>
  <single-slot-component>
    <p>使用這段取代原本的 Slot。</p>
  </single-slot-component>

  <h2>具名插槽</h2>
  <p>替換前</p>
  <named-slot-component>
  </named-slot-component>
  <p>替換後</p>
  <named-slot-component>
    <header slot="header">替換的 Header</header>
    <template slot="footer">替換的 Footer</template>
    <template slot="btn">按鈕內容</template>
    <p>其餘的內容</p>
  </named-slot-component>
 </div>

 <!-- 沒有 slot 可替換 -->
 <script type="text/x-template" id="noSlotComponent">
  <div class="alert alert-warning">
  <h6>我是一個元件</h6>
  <p>
    這沒有插槽。
  </p>
</div>
</script>

 <!-- slot 基礎使用 -->
 <script type="text/x-template" id="singleSlotComponent">
  <div class="alert alert-warning">
  <h6>我是一個元件</h6>
    <slot>
    如果沒有內容，則會顯示此段落。
  </slot>
</div>
</script>

 <!-- 具名插槽 -->
 <script type="text/x-template" id="namedSlotComponent">
  <div class="card my-3">
  <div class="card-header">
    <slot name="header">這段是預設的文字</slot>
  </div>
  <div class="card-body">
    <slot>
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    </slot>
    <a href="#" class="btn btn-primary">
      <slot name=btn>spanGo somewhere</slot>
    </a>
  </div>
  <div class="card-footer">
    <slot name="footer">這是預設的 Footer</slot>
  </div>
</div>
</script>