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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 53+ | × | ● 10+ | × | × | ● 40+ | ● 10.0+ | × |
関連記事
- Document.compatMode
- compatModeは、Documentのプロパティです。ブラウザのレンダリングモード名を返します。通常はCSS1Compatというモード名ですが、古いバージョンのドキュメントに対応した互換モードの場合、BackCompatというモード名になります。
- Document.designMode
- designModeは、Documentのプロパティです。ドキュメントの編集モードを表す文字列を返します。"on"を代入すれば、ドキュメント全体を、ユーザーが自由に編集できるようになります。
- Document()
- Document()は、Documentのコンストラクタです。新しいオブジェクトを作成します。
- Document.createTextNode()
- createTextNode()は、Documentのメソッドです。テキストノード(Text)を新しく作成します。