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

ShadowRoot.host - ホスト要素

hostは、ShadowRootのプロパティです。Shadow DOMのホスト要素を返します。

概要

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

説明

自身のホスト要素を返す。読み取り専用のため、値を代入することはできません。

デモ

ShadowRoot.hostのデモです。

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

<!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" } ) ;
shadowRoot.appendChild( templeteContent ) ;

var value = shadowRoot.host ;

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

サポート状況

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