備忘録的プログラミングリファレンス

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と表示されます。