Day 11: Web Component 的應用-Modal 與 slot

2025 iThome 鐵人賽

DAY 11

Modern Web

原生元件養成計畫：Web Component系列第 11 篇

17th鐵人賽

zoey

團隊兩貓一犬一條龍小隊

2025-09-20 22:26:12

62 瀏覽

分享至

其實 Modal 可以說是我想到最適合拿來說明 slot 這個概念的元件了！
在開發公司的應用時，常常大量需要用到彈出視窗，不管是 alert, confirm, 又或是預覽資料、檢視等等的功能。
但以上提到的 modal 型式，有的有 header，有的有 footer，有的都沒有。
要想符合這些需求，這時候，slot（插槽）就是一個很重要的東西！有學過 Vue 應該對 slot 不陌生了，而在 Web Component 也是一樣的概念！

先架構一下 template 中的插槽吧！

這個 modal 會有 header、content、footer 三大區塊，所以我們利用 具名 slot ： slot name="區塊名稱"來定義我們要提供給外部使用的插槽。
slot

定義一個 Custom Element - `custom-modal`

modal.js

class CustomModal extends HTMLElement {
  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });
    const cloneNode = this.render().cloneNode(true);
    shadowRoot.appendChild(cloneNode);
  }
}

render() {
  const template = document.createElement('template');

  template.innerHTML = `
    <style>
      .modal-container {
        padding: 20px;
        background-color: #dddddd;
        border-radius: 6px;
      }

      .modal-header {
        font-size: 20px;
        font-weight: 500;
        padding-bottom: 4px;
      }

      .modal-content {
        padding: 4px;
        border-top: 1px solid #999999;
        border-bottom: 1px solid #999999;
      }
    </style>

    <!-- 定義 modal 結構 -->
    <div class="modal-container">
      <div class="modal-header">
        <!-- 加入 slot : header -->
        <slot name="header"></slot>
      </div>

      <div class="modal-content">
        <!-- 加入 slot : content -->
        <slot name="content">
          <p class="default-content">預設文字</p>
        </slot>
      </div>

      <div class="modal-footer">
        <!-- 加入 slot : footer -->
        <slot name="footer"></slot>
      </div>
    </div>
  `

  return template.content;
}

customElements.define('custom-modal', CustomModal);

外部使用 custom-modal
index.html

<body>
  <div style="display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;">
    <custom-modal></custom-modal>
  </div>

  <script src="modal.js"></script>
</body>

先來看一下範例結果吧！

slot

可以從呈現畫面看見，我們在 template 中定義的 slot 只有 <slot name="content"></slot> 插槽中有放 預設內容 ，所以在外部套用者沒有給定任何插槽內容時，就會呈現我們一開始在元件中給定的 預設內容，也就是預設文字四個字。

試著在外部加入自訂內容！

在 header 加入標題
在 content 加入文字
在 footer 加入按鈕

index.html

<body>
  <div style="display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;">
    <custom-modal>
      <div slot="header" style="display: flex; justify-content: flex-start;">
        <h4 style="margin: 0;">彈出視窗</h4>
      </div>

      <div slot="content">
        <p>
          注意！這是一個彈出視窗！
        </p>
      </div>

      <div slot="footer" style="display: flex; justify-content: flex-end; padding-top: 12px">
        <button>關閉按鈕</button>
      </div>
    </custom-modal>
  </div>

  <script src="modal.js"></script>
</body>