このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
ShadowRoot: mode プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
mode はShadowRoot の読み取り専用プロパティで、モードをopen とclosed のどちらかで示します。これはシャドウルートの内部機能を JavaScript からアクセスできるかどうかを定義します。
シャドウルートのmode が "closed" であった場合、シャドウルートの内部的な実装は JavaScript からアクセスできず、変更できなくなります。例えば、<video> の内部の実装は JavaScript からアクセスも変更もできないのと同様になります。
このプロパティ値を設定するには、Element.attachShadow() に渡すオブジェクトのoptions.mode プロパティを使用するか、シャドウルートを宣言的に作成する場合は、<template> 要素のshadowrootmode 属性を使用します。
値
次のどちらかの値を取りうる文字列です。
例
js
// アクセスできない closed のシャドウルートを作成しますlet element = document.createElement("div");element.attachShadow({ mode: "closed" });element.shadowRoot; // シャドウルートが closed なので null// アクセスできる open のシャドウルートを作成しますlet element2 = document.createElement("div");element2.attachShadow({ mode: "open" });console.log(`The shadow is ${element2.shadowRoot.mode}`); // "The shadow is open" と出力element2.shadowRoot.textContent("Opened shadow"); // シャドウは open なので、外部からアクセスできる仕様書
| Specification |
|---|
| DOM # dom-shadowroot-mode |