參考鏈接：點我

一、什么是Shadow DOM

Shadow DOM，直接翻譯的話就是?影子 DOM，可以理解為潛藏在 DOM 結(jié)構(gòu)中并且我們無法直接控制操縱的 DOM 結(jié)構(gòu)。類似于下面這種結(jié)構(gòu)

Shadow DOM 可以在瀏覽器中生成一個獨立于DOM樹之外的 DOM結(jié)構(gòu)

二、Shadow DOM的結(jié)構(gòu)

1、Shadow host：相當(dāng)于存放Shadow DOM的容器

2、Shadow root：Shadow DOM的根，它和它的后代元素，都將對用戶隱藏，但是它們是實際存在的，在 chrome 中，我們可以通常審查元素去查看它們的具體 DOM 實現(xiàn)。

3、contents：Shadow DOM的具體內(nèi)容

三、如何創(chuàng)建使用Shadow DOM

1、創(chuàng)建

function createShadowDOM(elem) {// var root = elem.createShadowRoot() //已被attachShadow替換var root = elem.attachShadow({mode:"open"})// mode為open時對外可以訪問root.appendChild(createComponent("costom-component"))// 自定義標(biāo)簽}

2、使用

<div id="div">這里是不顯示出來的，如果你看到了，說明瀏覽器不支持ShadowDOM</div> createShadowDOM(document.querySelector("#div"))

3、獲取Shadow DOM

document.querySelector('#div').shadowRoot

四、用途

1、在編寫插件時，需要向DOM中插入新的DOM，但又怕樣式或者DOM發(fā)生沖突，Shadow DOM的樣式以及結(jié)構(gòu)都是對外分開，不會溢出，外部的亦不會侵入

2、登其他自己去發(fā)現(xiàn)

五、優(yōu)缺點

優(yōu)點：

1、可封裝復(fù)用

2、不會增加DOM的結(jié)構(gòu)

3、樣式獨立

缺點：

1、兼容性差

2、不易調(diào)試或檢查

?七、自定義標(biāo)簽

自定義元素：點我

使用es6的class寫法，繼承 HTMLElement，使用connectedCallback添加方法，使用attributeChangedCallback做屬性的改變

注：自定義標(biāo)簽的名稱必須是包含一個破折號（ - ），并且不能有大寫字母

class CustomElement extends HTMLElement {constructor() {super()this._name = 'Custom'}connectedCallback() {this.addEventListener('click', e => alert(`Hello, ${this._name}!`));}attributeChangedCallback(attrName, oldValue, newValue) {if (attrName === 'name') {if (newValue) {this._name = newValue} else {this._name = 'Custom'}}}}CustomElement.observedAttributes = ['name']customElements.define('costom-component', CustomElement)

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/detanx/p/ShadowDOMCustom.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的Shadow DOM及自定义标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。