參考鏈接：點我

一、什么是Shadow DOM

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

Shadow DOM 可以在瀏覽器中生成一個獨立于DOM樹之外的 DOM結構

二、Shadow DOM的結構

1、Shadow host：相當于存放Shadow DOM的容器

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

3、contents：Shadow DOM的具體內容

三、如何創建使用Shadow DOM

1、創建

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

2、使用

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

3、獲取Shadow DOM

document.querySelector('#div').shadowRoot

四、用途

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

2、登其他自己去發現

五、優缺點

優點：

1、可封裝復用

2、不會增加DOM的結構

3、樣式獨立

缺點：

1、兼容性差

2、不易調試或檢查

?七、自定義標簽

自定義元素：點我

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

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

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)

　　

?

轉載于:https://www.cnblogs.com/detanx/p/ShadowDOMCustom.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。