Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
草案
このページは完成していません。
読み取り専用のプロパティである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 の定義 |
現行の標準 |
ブラウザ互換性
BCD tables only load in the browser