關於 shadow DOM 的用法！

Web components 的一個重要屬性是封裝——可以將標記結構、樣式和行爲隱藏起來，並與頁面上的其他代碼相隔離，保證不同的部分不會混在一起，可使代碼更加乾淨、整潔。其中，Shadow DOM 接口是關鍵所在，它可以將一個隱藏的、獨立的 DOM 附加到一個元素上。本篇文章將會介紹 Shadow DOM 的基礎使用。

備註：Firefox（從版本 63 開始），Chrome，Opera 和 Safari 默認支持 Shadow DOM。基於 Chromium 的新 Edge 也支持 Shadow DOM；而舊 Edge 未能撐到支持此特性。

Shadow DOM 允許將隱藏的 DOM 樹附加到常規的 DOM 樹中——它以 shadow root 節點爲起始根節點，在這個根節點的下方，可以是任意元素，和普通的 DOM 元素一樣。

這裏，有一些 Shadow DOM 特有的術語需要我們瞭解：

1.Shadow host：一個常規 DOM 節點，Shadow DOM 會被附加到這個節點上。2.Shadow tree：Shadow DOM 內部的 DOM 樹。3.Shadow boundary：Shadow DOM 結束的地方，也是常規 DOM 開始的地方。4.Shadow root: Shadow tree 的根節點。

基本用法

可以使用 Element.attachShadow() 方法來將一個 shadow root 附加到任何一個元素上。它接受一個配置對象作爲參數，該對象有一個 mode 屬性，值可以是 open 或者 closed，open 表示可以通過頁面內的 JavaScript 方法來獲取 Shadow DOM。

<body>
  <!-- 類似組件一樣可以複用 -->
  <popup-info></popup-info>
  <popup-info></popup-info>
  <script>
    class PopUpInfo extends HTMLElement {
      constructor() {
        // 必須首先調用 super方法
        super();
        // 元素的具體功能寫在下面
        var shadow = this.attachShadow({ mode: 'open' });
        var wrapper = document.createElement('span');
        wrapper.setAttribute('class', 'wrapper');
        wrapper.textContent = 'hello world'
        // 最後，將所有創建的元素添加到 Shadow root 上：
        shadow.appendChild(wrapper);
      }
    }
    // 定義新的元素
    customElements.define('popup-info', PopUpInfo);
</script>
</body>

我們着手實現一個示例來說明 Shadow DOM 在 custom element 中的實際運用。它包含一個 span 標籤和裏面的文字。

1、創建 shadow root

var shadow = this.attachShadow({ mode: 'open' });

在構造函數中，我們首先將 Shadow root 附加到 custom element 上。

2、創建 shadow DOM 結構

var wrapper = document.createElement('span');

接下來，我們會使用相關 DOM 操作來創建元素的 Shadow DOM 結構。

3、將 Shadow DOM 添加到 Shadow root 上

shadow.appendChild(wrapper);

最後，將所有創建的元素添加到 Shadow root 上。

4、使用我們的 custom element

<popup-info></popup-info>

完成類的定義之後，使用元素也是一樣簡單，只需將 custom element 放在頁面上。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/FnUaPLrE9AaEYHyaiUw6Uw

猜你喜歡