ShadowRoot
ShadowRoot
インターフェイスは Shadow DOM API の1つで、文書の DOM ツリーから分離してレンダリングされた部分木の根ノードを指します。
shadow ツリーが mode
オプションを open
に指定して Element.attachShadow()
から作られた場合、shadow root への参照は Element.shadowRoot
プロパティによって読み出すことが出来ます。
プロパティ
ShadowRoot.delegatesFocus
読取専用- シャドウが添付されたときに delegatesFocus が設定されていたかどうかを示す真偽値を返します (
Element.attachShadow()
を参照)。 ShadowRoot.host
読取専用ShadowRoot
が追加された DOM 要素への参照を返します。ShadowRoot.innerHTML
ShadowRoot
の内部ツリーへの参照を設定する、または受け取ることが出来ます。ShadowRoot.mode
読取専用ShadowRoot
のモードでopen
またはclosed
の値を取ります。これはシャドウルートの内部の機能に JavaScript からアクセスできるかどうかを定義します。
DocumentOrShadowRoot 由来のプロパティ
ShadowRoot
インターフェイスは DocumentOrShadowRoot
で定義された以下のプロパティを含みます。これは Chrome ブラウザーのみ実装されており、他のブラウザーでは依然 Document
インターフェイスで実装されています。
DocumentOrShadowRoot.activeElement
読取専用- shadow ツリーの範囲内で、フォーカスされている
Element
を返します。 DocumentOrShadowRoot.styleSheets
読取専用- 文書に明示的にリンクされている、または埋め込まれている
CSSStyleSheet
オブジェクトのStyleSheetList
を返します。
メソッド
ShadowRoot
インターフェイスは DocumentOrShadowRoot
で定義された以下のプロパティを含みます。これは Chrome ブラウザーのみ実装されており、他のブラウザーでは依然 Document
インターフェイスで実装されています。
DocumentOrShadowRoot.getSelection()
- ユーザーによって選択されたテキストの範囲または現在のキャレットの位置を表現する
Selection
オブジェクトを返します。 DocumentOrShadowRoot.elementFromPoint()
- 指定された座標における最上位の要素を返します。
DocumentOrShadowRoot.elementsFromPoint()
- 指定された座標における全要素からなる配列を返します。
DocumentOrShadowRoot.caretPositionFromPoint()
- キャレットを含む DOM ノードとキャレットのオフセットを含む
CaretPosition
オブジェクトを返します。
例
以下のコードは、サイズと色の属性が指定された四角形の要素を作る life-cycle-callbacks の例です。 (実行例)
<custom-square>
要素のクラス定義の中に、外部関数である updateStyle
を呼び出す life-cycle-callbacks が含まれています。updateStyle
は要素のサイズと色を適用しています。this
(カスタム要素自身) をパラメータとして関数に渡していることが分かるでしょう。
connectedCallback() {
console.log('四角形のカスタム要素がページに追加されました。');
updateStyle(this);
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('四角形のカスタム要素の属性が変更されました。');
updateStyle(this);
}
updateStyle
関数の中では、Element.shadowRoot
を利用して shadow DOM への参照を取得しています。shadow DOM 内では、標準的な DOM の探索手法を用いて <style>
を探し、CSS を更新しています。
function updateStyle(elem) {
var shadow = elem.shadowRoot;
var childNodes = shadow.childNodes;
for(var i = 0; i < childNodes.length; i++) {
if(childNodes[i].nodeName === 'STYLE') {
childNodes[i].textContent = 'div {' +
' width: ' + elem.getAttribute('l') + 'px;' +
' height: ' + elem.getAttribute('l') + 'px;' +
' background-color: ' + elem.getAttribute('c');
}
}
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
DOM Interface ShadowRoot の定義 |
現行の標準 |
ブラウザーの対応
BCD tables only load in the browser