關(guān)于 shadow DOM 的用法！
Web components 的一個重要屬性是封裝——可以將標記結(jié)構(gòu)、樣式和行為隱藏起來，并與頁面上的其他代碼相隔離，保證不同的部分不會混在一起，可使代碼更加干凈、整潔。其中，Shadow DOM 接口是關(guān)鍵所在，它可以將一個隱藏的、獨立的 DOM 附加到一個元素上。本篇文章將會介紹 Shadow DOM 的基礎(chǔ)使用。
備注：Firefox（從版本 63 開始），Chrome，Opera 和 Safari 默認支持 Shadow DOM。基于 Chromium 的新 Edge 也支持 Shadow DOM；而舊 Edge 未能撐到支持此特性。
Shadow DOM 允許將隱藏的 DOM 樹附加到常規(guī)的 DOM 樹中——它以 shadow root 節(jié)點為起始根節(jié)點，在這個根節(jié)點的下方，可以是任意元素，和普通的 DOM 元素一樣。
這里，有一些 Shadow DOM 特有的術(shù)語需要我們了解：
1.Shadow host：一個常規(guī) DOM節(jié)點，Shadow DOM 會被附加到這個節(jié)點上。2.Shadow tree：Shadow DOM內(nèi)部的DOM樹。3.Shadow boundary：Shadow DOM結(jié)束的地方，也是常規(guī) DOM開始的地方。4.Shadow root: Shadow tree的根節(jié)點。
基本用法
可以使用 Element.attachShadow() 方法來將一個 shadow root 附加到任何一個元素上。它接受一個配置對象作為參數(shù)，該對象有一個 mode 屬性，值可以是 open 或者 closed，open 表示可以通過頁面內(nèi)的 JavaScript 方法來獲取 Shadow DOM。
<body><popup-info>popup-info><popup-info>popup-info><script>class PopUpInfo extends HTMLElement {constructor() {// 必須首先調(diào)用 super方法super();// 元素的具體功能寫在下面var shadow = this.attachShadow({ mode: 'open' });var wrapper = document.createElement('span');wrapper.setAttribute('class', 'wrapper');wrapper.textContent = 'hello world'// 最后，將所有創(chuàng)建的元素添加到 Shadow root 上：shadow.appendChild(wrapper);}}// 定義新的元素customElements.define('popup-info', PopUpInfo);script>body>
我們著手實現(xiàn)一個示例來說明 Shadow DOM 在 custom element 中的實際運用。它包含一個span 標簽和里面的文字。
1、創(chuàng)建 shadow root
var shadow = this.attachShadow({ mode: 'open' });在構(gòu)造函數(shù)中，我們首先將 Shadow root 附加到 custom element 上。
2、創(chuàng)建 shadow DOM 結(jié)構(gòu)
var wrapper = document.createElement('span');接下來，我們會使用相關(guān) DOM 操作來創(chuàng)建元素的 Shadow DOM 結(jié)構(gòu)。
3、將 Shadow DOM 添加到 Shadow root 上
shadow.appendChild(wrapper);最后，將所有創(chuàng)建的元素添加到 Shadow root 上。
4、使用我們的 custom element
完成類的定義之后，使用元素也是一樣簡單，只需將 custom element 放在頁面上。