attachShadow() メソッド
Element.attachShadow()
attachShadow() メソッドは、エレメントに ShadowRoot と呼ばれるエレメントルートを作成するメソッドです。
var shadowroot_ = document.getElementById('example').attachShadow({mode: 'open'});
詳しくは Example を参照してください
ShadowRootは、開発用に用意された機能です。ShadowRootに追加されたエレメントは外部のCSSファイルやJavaScriptから参照することができません。
ShadowRoot以下のエレメント群は外部から影響を受けないようにできる機能です。仮のコンテンツ作成に向いており、主に大規模開発に向いています。
attachShadow() メソッドを使うことができるエレメントに制限があります。使えるエレメントは以下です。
<article>、<aside>、<blockquote>、<body>、<div>、<footer>、<h1>-<h6>、<header>、
<main>、
<nav>、
<p>、
<section>、
<span>
ページ内 Index
- ad -
構文（Syntax）
in JavaScript
返り値は ShadowRoot オブジェクトです。
ShadowRoot = Element.attachShadow();
引数（Parameter Values）
以下のように引数を指定します。
Element.attachShadow({mode: 'open'})
| Value | 摘要 |
|---|---|
| mode | 'open'..Element.shadowRootでアクセス可。'closed'..Element.shadowRootでもアクセス不可 |
| delegatesFocus | フォーカスを受付けるか／否か。'true'にすると:focus疑似クラスが使える |
返り値（Return Values）
ShadowRootオブジェクト
Example
attachShadow()の例です。
以下に、通常のElement.appendChild()メソッドで追加した方法とShadowRootに追加した方法を示します。
さらに、通常のElement.appendChild()メソッドで追加されたエレメントにアクセスしオブジェクトを表示。
ShadowRootに追加されたエレメントにもアクセスしてオブジェクトを表示します。
ShadowRootに追加されたエレメントにはアクセスできずnull
と表示されます。
- ad -