attachShadow()メソッド
Element.attachShadow()
attachShadow()メソッドは、エレメントにShadowRootと呼ばれるエレメントルートを作成するメソッドです。
attachShadow()メソッド例
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>
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
と表示されます。
