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

概述

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

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

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

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

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

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

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

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

創(chuàng)建

需要對宿主 DOM 調(diào)用 attachShadow() 方法來創(chuàng)建影子根實例。

attachShadow

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

- mode（必填）

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

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

- delegatesFocus

    布爾類型。默認值為 false。

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

例子

為影子 DOM 添加樣式

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

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

編程式

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

聲明式

或者更直接一點：

refer

MDN - 使用影子 DOM

MDN - Element.attachShadow()