草案
このページは完成していません。
読み取り専用のプロパティであるElement.shadowRoot
は、そのエレメントによってホストされたshadow rootへの読み取りアクセスを提供します。既に存在している要素にshadow rootを追加する場合は Element.attachShadow
を使用してください。
文法
var shadowroot = element.shadowRoot;
値
ShadowRoot
オブジェクトです。 アタッチされた時のmode
に closed
が指定された場合には null
となります。
Examples
The following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.
Inside the <custom-square>
element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle()
, which actually applies the size and color to the element. You'll see that we are passing it this
(the custom element itself) as a parameter.
connectedCallback() { console.log('Custom square element added to page.'); updateStyle(this); } attributeChangedCallback(name, oldValue, newValue) { console.log('Custom square element attributes changed.'); updateStyle(this); }
In the updateStyle()
function itself, we get a reference to the shadow DOM using Element.shadowRoot
. From here we use standard DOM traversal techniques to find the <style>
element inside the shadow DOM and then update the CSS found inside it:
function updateStyle(elem) { const shadow = elem.shadowRoot; const childNodes = Array.from(shadow.childNodes); childNodes.forEach(childNode => { if (childNode.nodeName === 'STYLE') { childNode.textContent = ` div { width: ${elem.getAttribute('l')}px; height: ${elem.getAttribute('l')}px; background-color: ${elem.getAttribute('c')}; } `; } }); }
仕様
仕様 | 状態 | 注脚 |
---|---|---|
DOM shadowRoot の定義 |
現行の標準 |
ブラウザ互換性
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
shadowRoot | Chrome 完全対応 43 | Edge
未対応
なし
| Firefox
完全対応
63
| IE 未対応 なし | Opera 完全対応 40 | Safari 完全対応 10 | WebView Android 完全対応 43 | Chrome Android 完全対応 43 | Firefox Android
完全対応
63
| Opera Android 完全対応 41 | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。