Edit

Page

Page title:

Page body:

[15] [DFN[[RUBY[[[影根]]][かげね]@en[shadow root]]]]は、
[[影木]]の[[根]]です。[[影根]]は、 [CODE(DOMi)@en[ShadowRoot]] 
[[インターフェイス]]を[[実装]]する[[節点]][[オブジェクト]]です。

* 仕様書

[REFS[
- [9] '''[CITE@en[DOM Standard]] ([TIME[2016-04-26 13:45:33 +09:00]] 版) <https://dom.spec.whatwg.org/#interface-shadowroot>'''
- [20] [CITE@en[DOM Standard]] ([TIME[2016-04-26 13:45:33 +09:00]] 版) <https://dom.spec.whatwg.org/#mixin-documentorshadowroot>
- [21] [CITE@en[DOM Standard]] ([TIME[2016-04-26 13:45:33 +09:00]] 版) <https://dom.spec.whatwg.org/#concept-element-shadow-root>
- [23] [CITE@en[DOM Standard]] ([TIME[2016-04-26 13:45:33 +09:00]] 版) <https://dom.spec.whatwg.org/#dom-element-shadowroot>
- [26] [CITE@en[DOM Standard]] ([TIME[2016-04-26 17:13:41 +09:00]] 版) <https://dom.spec.whatwg.org/#dictdef-shadowrootinit>
]REFS]

* 意味

[14] [CODE(DOMi)@en[ShadowRoot]] [[節点]]は、[DFN[[RUBYB[[[影根]]]@en[shadow root]]]]です
[SRC[>>9]]。

[19] [[影根]]は、 [CODE(DOMi)@en[DocumentFragment]] [[節点]]の特殊形です。

* 状態

[16] [CODE(DOMi)@en[DocumentFragment]] の状態に加えて、次の状態を持ちます。
[FIG(list members)[
: [F[モード][ShadowRootMode]] :
]FIG]

[18] [[影根]]は、常に [[null]] でない[F[ホスト][ホスト (DOM)]]を持ちます [SRC[>>9]]。

* メンバー

[10] [CODE(DOMi)@en[ShadowRoot]] [[インターフェイス]]は、
[CODE(DOMi)@en[DocumentFragment]] [[インターフェイス]]を[[継承]]しています [SRC[>>9]]。
更に、 [CODE(DOMi)@en[DocumentOrShadowRoot]] [[インターフェイス]]を[[実装]]しています
[SRC[>>20]]。

[12] [CODE(DOMi)@en[ShadowRoot]] [[インターフェイス]]は、
[CODE(DOMi)@en[DocumentFragment]] と [CODE(DOMi)@en[DocumentOrShadowRoot]]
の[[メンバー]]に加えて、
次の[[メンバー]]を持ちます。
[FIG(short list)[
- [CODE(DOMa)@en[mode][ShadowRootMode]]
- [CODE(DOMa)@en[host][host (DOM)]]
- [CODE[onslotchange]]
]FIG]

[11] [CODE(DOMi)@en[ShadowRoot]] [[インターフェイス]]は、
[[文書環境]]に[[晒され]]ています [SRC[>>9]]。

* モード

[17] [[影根]]は、[DFN[[F[[RUBYB[[[モード]]]@en[mode]]][ShadowRootMode]]]]を持ちます。
[F[モード][ShadowRootMode]]は、 [CODE[open][ShadowRootMode]] または 
[CODE[closed][ShadowRootMode]]
のいずれかです。 [SRC[>>9]]

[13] [CODE(DOMi)@en[ShadowRoot]] [[インターフェイス]]の
[DFN[[CODE(IDL)@en[mode][ShadowRootMode]]]] [[IDL属性]]の値は、
[[列挙型]] [DFN[[CODE(DOMi)@en[ShadowRootMode]]]]、すなわち
[CODE[open][ShadowRootMode]] または [CODE[closed][ShadowRootMode]] です [SRC[>>9]]。

[32] [[辞書]] [CODE(DOMi)@en[ShadowRootInit]] の[[メンバー]]
[DFN[[CODE(DOMa)@en[mode][ShadowRootMode]]]] は、
必須の [CODE(DOMi)@en[ShadowRootMode]] の値です [SRC[>>31]]。
[CODE(DOMm)@en[attachShadow]] [[メソッド]]において、
作成する[[影根]]の [CODE(DOMa)@en[mode][ShadowRootMode]] の値を指定するものです。

-*-*-

[37] [[Chrome]] は [CODE(HTMLe)@en[video]] や [CODE(HTMLe)@en[textarea]]
などいくつかの[[要素]]の実装に[[影木]]を使っており、[[開発者ツール]]の設定で、
[[要素木]]の表示に[[利用者エージェント]]の[[影木]]を含めることができます。
[TIME[2017-04-01T10:53:42.500Z]]

[38] [[利用者エージェント]]の[[影木]]は、 [CODE[#shadow-root (user-agent)]] と表示されます。

[39] [[利用者エージェント]]の[[影木]]の [CODE[mode][ShadowRootMode]] は
[CODE[closed][ShadowRootMode]] となっています。

;; [40] [[影木]]は通常の [[HTML要素]]で構成されます。[[疑似要素]]の名前は
[CODE(HTMLa)@en[pseudo]] [[属性]]で記述されています。

* 要素の[F[影根]]

[22] [[要素]]は、[DFN[[F[[RUBYB[[[影根]]]@en[shadow root]]]]]]を持ちます。
[F[影根]]は、[[影根]]または [[null]] です。初期値は [[null]] です。 [SRC[>>21]]
[CODE(DOMm)@en[attachShadow]] により[[影根]]が設定されることがあります。

[24] [CODE(DOMi)@en[Element]] [[インターフェイス]]の
[DFN[[CODE(DOMa)@en[shadowRoot]]]] [[IDL属性]]の[[取得器]]は、
次のようにしなければ[MUST[なりません]] [SRC[>>23]]。
[FIG(steps)[
= [30] [[文脈オブジェクト]]の[F[影根]]が [[null]] なら、
== [31] [[null]] を返します。
= [25] それ以外で、[[文脈オブジェクト]]の[F[影根]]の[F[モード][ShadowRootMode]] が
[CODE[closed][ShadowRootMode]] なら、
== [27] [[null]] を返します。
= [28] それ以外なら、
== [29] [[文脈オブジェクト]]の[F[影根]]を返します。
]FIG]

* 関連

[34] [[イベント経路]]も参照。

* 歴史

;; [8] [[XBL]], [[Web Components]], [[Shadow DOM]] も参照。

[1] [CITE@en[and should throw when passed a ShadowRoot to fix #46 · whatwg/dom@9d20dc5]]
([TIME[2015-06-27 13:15:07 +09:00]] 版)
<https://github.com/whatwg/dom/commit/9d20dc53fa5b47406c1cdfccaf3e1058be0042c1>

[2] [CITE@en[Make cloneNode() throw for ShadowRoot objects · whatwg/dom@02ec9c7]]
([TIME[2016-02-25 11:20:44 +09:00]] 版)
<https://github.com/whatwg/dom/commit/02ec9c7e52cb5a09d4cf7d14a583c635ea6dc38d>

[3] [CITE@en[Shadow: add shadow root · whatwg/dom@b2ee400]]
([TIME[2016-03-16 14:22:51 +09:00]] 版)
<https://github.com/whatwg/dom/commit/b2ee400a6542dc76d41bed5d2edb8c85ba241bfc>

[4] [CITE@en[Shadow: define .attachShadow() and .shadowRoot · whatwg/dom@1699495]]
([TIME[2016-03-16 14:27:15 +09:00]] 版)
<https://github.com/whatwg/dom/commit/169949553da85cfee6b03df361ed3e8142ddc54e>

[5] [CITE@en[Shadow: add DocumentOrShadowRoot mixin · whatwg/dom@4183385]]
([TIME[2016-03-16 14:34:28 +09:00]] 版)
<https://github.com/whatwg/dom/commit/418338575c7f79a18d20ebcc88c19834366379cf>

[6] [CITE@en[Editorial: be clearer on host, define light tree · whatwg/dom@ce7df0b]]
([TIME[2016-03-20 18:54:53 +09:00]] 版)
<https://github.com/whatwg/dom/commit/ce7df0bfe425b4502bb40e66806dd76f14fcf68b>

[7] [CITE@en[Shadow: add ShadowRoot's mode attribute · whatwg/dom@810cce8]]
([TIME[2016-03-24 21:55:31 +09:00]] 版)
<https://github.com/whatwg/dom/commit/810cce8d16261a137f4137745b5dec05a3d75572>

[33] [CITE@en[Shadow: define event retargeting for shadow trees]]
([[annevk]]著, [TIME[2016-04-29 21:04:07 +09:00]])
<https://github.com/whatwg/dom/commit/ed94c9f2f1850b2e6a9b357c6870186859da4c2d>

[35] [CITE@en[Rename scoped to composed and invert its meaning]]
([[annevk]]著, [TIME[2016-05-10 16:14:09 +09:00]])
<https://github.com/whatwg/dom/commit/6e1b0386644301859c697ee2e868313963d2a602>

[36] [CITE@en[Editorial: stop enumerating ShadowRoot alongside DocumentFragment]]
([[annevk]]著, [TIME[2016-08-16 21:38:38 +09:00]])
<https://github.com/whatwg/dom/commit/443023ad7e5a04d050e21a206aff1b5bd66ddc07>

[41] [CITE@en[Deprecations and removals in Chrome 64  |  Web  |  Google Developers]]
([TIME[2018-01-06 02:02:10 +09:00]])
<https://developers.google.com/web/updates/2017/12/chrome-64-deprecations>

[42] [CITE@en[Editorial: ShadowRoot is sufficiently upstreamed]]
([[annevk]]著, [TIME[2018-03-23 19:04:02 +09:00]])
<https://github.com/whatwg/dom/commit/5be84cc52d072197cae81131badd10751f9e1d51>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)