DOM

：

：

Element.attachShadow() メソッド

　編集：2022.09.20 by T.A.

[Edge]。→、

element に指定のシャドウ DOM ツリーを追加し、そのシャドウルート ShadowRoot への参照を返します。

構文
element.attachShadow(init)
element Element オブジェクトで、以下のもの：

任意の自律カスタム要素で有効な名前を持つもの、<article>、<aside>、<blockquote>、<body>、<div>、<footer>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<header>、<main>、<nav>、<p>、<section>、<span>。

init 以下のフィールドを含むオブジェクトです。
プロパティ説明、値
mode 文字列で、シャドウ DOM ツリーのカプセル化モードを文字列で指定します。以下のうちの一つを取ります。
open
シャドウルートの要素には、例えば Element.shadowRoot を使用して、ルートの外部の JavaScript からアクセスできます。 
element.shadowRoot; // ShadowRoot オブジェクトを返す
closed
閉じたシャドウルートに対する外部の JavaScript からのアクセスを拒否します。 
element.shadowRoot; // null を返す
delegatesFocus 論理値。true に設定された場合、フォーカス可能性に関するカスタム要素の問題を緩和します。シャドウ DOM のフォーカスができない部分がクリックされた場合、最初のフォーカス可能な部分がフォーカスを得て、シャドウ ホストは :focus のスタイルを利用することができます。
戻り値

ShadowRoot オブジェクトです。

例外
InvalidStateError
取り付けようとしている要素が既にシャドウホストである場合。
NotSupportedError
シャドウ ルートを HTML 名前空間外の要素に取り付けようとした場合、シャドウを取り付けられない要素であった場合、要素の定義で静的プロパティ disabledFeatures が "shadow" の値であった場合。
例

¶省く 











テスト