建站
咨詢
售后
建站咨詢
新聞中心
前言
- ……
等等這些標(biāo)簽，看起來(lái)似乎很簡(jiǎn)單，可為什么可以展現(xiàn)出那么豐富復(fù)雜的布局?當(dāng)時(shí)我給自己的解釋是：這些標(biāo)簽都是系統(tǒng)控制渲染的。
作為一家“創(chuàng)意+整合+營(yíng)銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)公司提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、創(chuàng)意表現(xiàn)、網(wǎng)頁(yè)制作、系統(tǒng)開(kāi)發(fā)以及后續(xù)網(wǎng)站營(yíng)銷運(yùn)營(yíng)等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營(yíng)模式與有效的網(wǎng)絡(luò)營(yíng)銷方法,創(chuàng)造更大的價(jià)值。
現(xiàn)在想想，那么解釋好像有點(diǎn)道理，但終歸沒(méi)有涉及到本質(zhì)原因，專家級(jí)的解釋?xiě)?yīng)該是：以上這些元素都是以組件的方式存在，所展現(xiàn)出來(lái)的那些布局都是在組件內(nèi)部定義好的，如果頁(yè)面引用了這些元素標(biāo)簽，那它內(nèi)部的布局都會(huì)渲染在頁(yè)面上。
在介紹 Web Components 時(shí)講到，它的第二項(xiàng)技術(shù)規(guī)范為 Shadow DOM。通過(guò)了解 Shadow DOM 的相關(guān)知識(shí)，或許可以解開(kāi)上面的疑惑。
查看默認(rèn)組件的 Shadow DOM
有人可能疑惑，既然說(shuō)文章開(kāi)頭列舉的那些元素是組件，那為什么我在開(kāi)發(fā)者工具中看到的結(jié)構(gòu)是這樣的：
有什么辦法可以看到各個(gè)組件內(nèi)部的 DOM 結(jié)構(gòu)嗎?答案是有的，步驟如下：
第一步：打開(kāi)開(kāi)發(fā)者工具，點(diǎn)擊右上角的設(shè)置圖標(biāo)：
第二步：找到偏好設(shè)置-元素，然后對(duì) “顯示用戶代理 Shadow DOM” 進(jìn)行選中：
這時(shí)候，我們?cè)俨榭茨切┠J(rèn)組件的內(nèi)部結(jié)構(gòu)，如下所示：
可以看到，這些默認(rèn)標(biāo)簽下都包含一個(gè) “shadow root” 而在 shadow root 中包含的是具體布局：
一個(gè)看似簡(jiǎn)簡(jiǎn)單單的 audio 元素，里面的布局還蠻復(fù)雜的。這不禁讓我想到一句話：功夫都在舞臺(tái)外。
在上面的截圖中，我們看到了 “shadow root” ，它其實(shí)是 Shadow DOM 的一部分。
Shadow DOM 的概念
在介紹概念之前，我們先來(lái)看看 “shadow” 這個(gè)單詞的中文釋義：
Shadow DOM，翻譯過(guò)來(lái)就是“影子 DOM” 。
影子當(dāng)然都是藏在暗處，不容易讓人發(fā)現(xiàn)的，就像文章開(kāi)頭提到的那些默認(rèn)元素，如果不通過(guò)設(shè)置，我們表面上看到的就是簡(jiǎn)單的一個(gè)標(biāo)簽而已。
專業(yè)的解釋就是：Shadow DOM 是 HTML 的一個(gè)規(guī)范 ，它允許瀏覽器開(kāi)發(fā)者封裝自己的HTML 標(biāo)簽、CSS 樣式和特定的 Javascrip 代碼，同時(shí)也可以讓開(kāi)發(fā)人員創(chuàng)建類似 這樣的自定義標(biāo)簽。
Shadow DOM 的意義
“組件化”備受追捧的原因自然是因?yàn)樗?dú)特的魅力，我們只需要將定義好的組件通過(guò)簡(jiǎn)單的一組標(biāo)簽引入頁(yè)面，就可以得到預(yù)定好的效果，并且可以在多處使用。
而 Shadow DOM 能在 Web Components 體系中占據(jù)重要的地位，是因?yàn)槠渚哂辛己玫拿芊庑裕饕憩F(xiàn)在：
- 隱藏標(biāo)記、樣式和行為;
- 保持代碼隔離，保證頁(yè)面的干凈整潔，各組件內(nèi)部代碼互不影響;
- 隱藏實(shí)現(xiàn)細(xì)節(jié)，便于使用更強(qiáng)大的語(yǔ)法或功能。
這就意味著，如果我們使用了 Shadow DOM，那就可以在它內(nèi)部隨意的發(fā)揮，而不必?fù)?dān)心這些發(fā)揮會(huì)影響到頁(yè)面的其他部分，變相地給了開(kāi)發(fā)人員極大的自由。
想想曾經(jīng)小心翼翼地定義樣式、綁定事件的時(shí)光吧，懷念嗎?
Shadow DOM 結(jié)構(gòu)
Shadow DOM 允許將隱藏的 DOM 樹(shù)附加到常規(guī)的 DOM 樹(shù)中——它以 Shadow root 節(jié)點(diǎn)為起始根節(jié)點(diǎn)，在這個(gè)根節(jié)點(diǎn)的下方，可以是任意元素，和普通的 DOM 元素一樣，借用網(wǎng)上的一張圖片：
下面是我根據(jù)自己的理解畫(huà)出來(lái)的：
大家根據(jù)自己喜好，看哪一張更容易理解就對(duì)著哪張看，都無(wú)所謂的。對(duì)應(yīng)到實(shí)際的文檔中，其結(jié)構(gòu)如下：
在以上的結(jié)構(gòu)圖中，我們看到了幾個(gè)陌生的名詞，包括我們?cè)谥翱吹降?“shadow root”，它們都是 Shadow DOM 的術(shù)語(yǔ)，接下來(lái)我解釋一下它們各自的含義。
Shadow DOM 術(shù)語(yǔ)
Shadow host
一個(gè)常規(guī) DOM節(jié)點(diǎn)，Shadow DOM 會(huì)被附加到這個(gè)節(jié)點(diǎn)上。
Shadow tree
Shadow DOM內(nèi)部的DOM樹(shù)。
Shadow boundary
Shadow DOM 分界線。Shadow DOM 結(jié)束的地方，也是常規(guī) DOM 開(kāi)始的地方。
Shadow root
Shadow tree 的根節(jié)點(diǎn)。
用法
掛載 Shadow DOM
可使用 Element.attachShadow() 方法給指定的元素掛載一個(gè)Shadow DOM，并且返回對(duì) ShadowRoot 的引用。
let hostEle = document.getElementById("myCard");
let shadowroot = hostEle.attachShadow({mode: "open"});
控制 Shadow DOM
你可以使用同樣的方式來(lái)操作 Shadow DOM，就和操作常規(guī) DOM 一樣——例如添加子節(jié)點(diǎn)、設(shè)置屬性，以及為節(jié)點(diǎn)添加自己的樣式(例如通過(guò) element.style 屬性)，或者為整個(gè) Shadow DOM 添加樣式(例如在