ShadowRoot

例項屬性

ShadowRoot.activeElement 只讀

返回陰影樹中具有焦點的 Element。

ShadowRoot.adoptedStyleSheets

新增一個構造樣式表陣列，供陰影 DOM 子樹使用。這些樣式表可以與其他共享相同父 Document 節點以及文件本身的 DOM 子樹共享。

ShadowRoot.clonable 只讀

一個布林值，指示陰影根是否可克隆。

ShadowRoot.delegatesFocus 只讀

一個布林值，指示當選擇了一個不可聚焦的節點時，陰影根是否會將焦點委託給它。

ShadowRoot.fullscreenElement 只讀

當前在該陰影樹中處於全屏模式的元素。

ShadowRoot.host 只讀

返回一個對 ShadowRoot 所附著的 DOM 元素的引用。

ShadowRoot.innerHTML

設定或返回對 ShadowRoot 內部 DOM 樹的引用。

ShadowRoot.mode 只讀

ShadowRoot 的模式，可以是 open 或 closed。這決定了陰影根的內部功能是否可以從 JavaScript 訪問。

ShadowRoot.pictureInPictureElement 只讀

返回陰影樹中當前處於畫中畫模式的 Element。

ShadowRoot.pointerLockElement 只讀

返回在指標被鎖定期間被設定為滑鼠事件目標（target）的 Element。如果鎖定正在進行中、指標已解鎖或目標位於其他樹中，則返回 null。

ShadowRoot.serializable 只讀

一個布林值，指示陰影根是否可序列化。當其 options.serializableShadowRoots 引數設定為 true 時，元素內的可序列化陰影根將被 Element.getHTML() 或 ShadowRoot.getHTML() 序列化。這在建立陰影根時設定。

ShadowRoot.slotAssignment 只讀

返回一個字串，包含插槽分配的型別，可以是 manual 或 named。

ShadowRoot.styleSheets 只讀

返回一個 StyleSheetList，其中包含顯式連結到陰影樹或嵌入在陰影樹中的樣式表的 CSSStyleSheet 物件。

例項方法

ShadowRoot.getAnimations()

返回當前生效的所有 Animation 物件的陣列，這些物件的 target 元素是陰影樹的後代。

ShadowRoot.getSelection() 非標準

返回一個 Selection 物件，表示使用者選擇的文字範圍，或游標的當前位置。

ShadowRoot.elementFromPoint() 非標準

返回指定座標處的頂層元素。

ShadowRoot.elementsFromPoint() 非標準

返回指定座標處的所有元素的陣列。

ShadowRoot.setHTML()

提供了一種 XSS 安全的方法，將 HTML 字串解析並清理成一個 DocumentFragment，然後替換陰影 DOM 中的現有樹。

ShadowRoot.setHTMLUnsafe()

將 HTML 字串解析成一個文件片段，但不進行清理，然後替換陰影根的原始子樹。HTML 字串可以包含宣告式陰影根，當使用 ShadowRoot.innerHTML 設定 HTML 時，這些陰影根將被解析為 template 元素。

事件

透過從 HTMLSlotElement 冒泡的事件，ShadowRoot 可以獲得以下事件：

HTMLSlotElement slotchange 事件

當插槽中包含的節點發生變化時觸發的事件。

示例

以下程式碼片段摘自我們的 life-cycle-callbacks 示例（也可以 即時檢視），該示例建立了一個元素，該元素顯示一個由元素屬性指定的尺寸和顏色的正方形。

在 <custom-square> 元素的類定義中，我們包含了一些生命週期回撥，它們呼叫了一個外部函式 updateStyle()，該函式實際上將尺寸和顏色應用於元素。您會看到我們正在將其 this（即自定義元素本身）作為引數傳遞。

class Square extends HTMLElement {
  // …
  connectedCallback() {
    console.log("Custom square element added to page.");
    updateStyle(this);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log("Custom square element attributes changed.");
    updateStyle(this);
  }
  // …
}

在 updateStyle() 函式本身中，我們使用 Element.shadowRoot 獲取對陰影 DOM 的引用。然後，我們使用標準的 DOM 遍歷技術找到陰影 DOM 中的 <style> 元素，並更新其中找到的 CSS。

function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = shadow.childNodes;
  for (const node of childNodes) {
    if (node.nodeName === "STYLE") {
      node.textContent = `
div {
  width: ${elem.getAttribute("l")}px;
  height: ${elem.getAttribute("l")}px;
  background-color: ${elem.getAttribute("c")};
}
      `;
    }
  }
}

規範

瀏覽器相容性

另見

• 使用 Shadow DOM
• Web 元件