国內一级黄色视频|少妇91导航日韩第一页久久|黄色三A视频色爽网站|亚洲精品 无码一区二区在直播间|成人高清国产无码|aaa成人免费视频|国产一级一片免费播放放a|我要看免费的毛片|动漫a片免费观看|日韩欧美国产视频

概述

Q：Shadow DOM 是什么？ A：是一種特殊的 DOM 樹，它依附于一個(gè)常規(guī)的 DOM 元素上。

Q：Shadow DOM 有什么特性？ A：它不受外部的 js 及 css 影響?？梢岳斫鉃橐粋€(gè)隔離沙箱。

Q：Shadow DOM 有什么用？ A：與外部的隔離性，意味它很適合用來(lái)封裝組件。它是 Web Component 的基礎(chǔ)。

一些需要了解的基本術(shù)語(yǔ)：

- shadow host（影子宿主）：影子 DOM 附加到的常規(guī) DOM 節(jié)點(diǎn)。

- shadow tree（影子樹）：影子 DOM 內(nèi)部的 DOM 樹。

- shadow boundary（影子邊界）：影子 DOM 終止，常規(guī) DOM 開始的地方。

- shadow root（影子根）：影子樹的根節(jié)點(diǎn)。

創(chuàng)建

需要對(duì)宿主 DOM 調(diào)用 attachShadow() 方法來(lái)創(chuàng)建影子根實(shí)例。

attachShadow

attachShadow() 接受一個(gè)參數(shù)來(lái)設(shè)置 shadow root，是一個(gè) ShadowRootInit 字典，它包含兩個(gè)字段：

- mode（必填）

    字符串類型，可選值為：'open' 和 'close'。

    代表是否允許在外部使用 js 來(lái)訪問(wèn) Shadow DOM 內(nèi)部。

- delegatesFocus

    布爾類型。默認(rèn)值為 false。

    它的作用有點(diǎn)類似 <label>：當(dāng) shadow DOM 中不可聚焦的位置被點(diǎn)擊后，焦點(diǎn)是否會(huì)自動(dòng)轉(zhuǎn)移到 shadow DOM 內(nèi)部的第一個(gè)可聚焦元素（如 <input>、<textarea> 等）。

例子

為影子 DOM 添加樣式

影子 DOM 添加樣式有幾種方法：

• 編程式：使用 CSSStyleSheet 創(chuàng)建，可復(fù)用
• 聲明式：使用 <template> 聲明，或者直接在內(nèi)容中寫 <style>，不可復(fù)用

編程式

1. 創(chuàng)建一個(gè)空的 CSSStyleSheet 對(duì)象
2. 使用 CSSStyleSheet.replace() 或 CSSStyleSheet.replaceSync() 設(shè)置其內(nèi)容
3. 通過(guò)將其賦給 ShadowRoot.adoptedStyleSheets 來(lái)添加到影子根

聲明式

或者更直接一點(diǎn)：

refer

MDN - 使用影子 DOM

MDN - Element.attachShadow()