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

ShadowRoot.mode - モード

modeは、ShadowRootのプロパティです。Shadow DOMのモードを表す文字列を返します。

概要

名前
mode
所属
ShadowRoot
IDL
readonly attribute ShadowRootMode mode;
仕様書
https://dom.spec.whatwg.org/#dom-shadowroot-mode

説明

自身のモードを返す。読み取り専用のため、値を代入することはできません。

デモ

ShadowRoot.modeのデモです。Shadow Rootを作成する際のモードを変更して、反映されるか確認してみて下さい。

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

<!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>

<hr>
<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" } ) ;	// modeを変更してみよう!
shadowRoot.appendChild( templeteContent ) ;

var value = shadowRoot.mode ;

console.log( value ) ;
document.body.appendChild( new Text( value ) ) ;
</script>
</body>
</html>

サポート状況

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