SYNCERのロゴ
アイキャッチ画像

ShadowRoot - Shadow DOMのルート

ShadowRootは、Shadow DOMを管理するための機能を備えたインターフェイスです。

概要

名前
ShadowRoot
継承
実装
DocumentOrShadowRoot
IDL
[Exposed=Window]
interface ShadowRoot : DocumentFragment {
  readonly attribute ShadowRootMode mode;
  readonly attribute Element host;
};
仕様書
https://dom.spec.whatwg.org/#shadowroot

チュートリアル

ShadowRootは、次のように作成できます。

<div id="hoge"></div>
var hostElement = document.getElementById( "hoge" ) ;
var shadowRoot = hostElement.attachShadow( { mode: "open" } ) ;	// ShadowRoot

shadowRoot.host ;	// <div id="hoge"></div>
shadowRoot.mode ;	// "open"

ShadowRootはDocumentFragmentのインターフェイスを継承しているので、同じように使えます。例えば、要素を追加するにはElement.appendChild()を利用します。

shadowRoot.appendChild( element1 ) ;
shadowRoot.appendChild( element2 ) ;
shadowRoot.appendChild( element3 ) ;

デモ

ShadowRootのデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<body>
<div id="hoge">
	<span slot="name">あらゆ</span>
	<img slot="image" src="./image.png" width="120" height="120">
</div>

<template id="fuga">
	<p>名前: <slot name="name"></slot></p>
	<p>画像: <slot name="image"></slot></p>
</template>

<script>
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;

var hostElement = element1 ;
var templeteContent = element2.content.cloneNode(true) ;
var shadowRoot = hostElement.attachShadow( { mode: "open" } ) ;

shadowRoot.appendChild( templeteContent ) ;
</script>
</body>
</html>

コンストラクタ

コンストラクタはありません。

プロパティ

host

Shadow DOMのホスト要素を返します。

mode

Shadow DOMのモードを表す文字列を返します。

メソッド

固有のメソッドはありません。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
ShadowRoot 53+× 10+×× 40+ 10.0+×
host 52+× 10+×× 40+ 10.0+×
mode 53+× 10+×× 40+ 10.0+×
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月5日 (木)
コンテンツを公開しました。