HTMLSlotElement.assignedNodes() - slot要素に割り当てられている要素
公開日:
HTMLSlotElement.assignedNodes()は、HTMLSlotElementのメソッドです。HTMLのslot要素に割り当てられている要素を、配列で取得します。Shadow Rootの作成後に利用するメソッドです。
概要
IDL
sequence<Node> assignedNodes(optional AssignedNodesOptions options);
dictionary AssignedNodesOptions {
boolean flatten = false;
};
引数
第1引数: options (省略可)
optional AssignedNodesOptions options
オプションとなるオブジェクトを指定する。オブジェクトのプロパティは下記の通り。
- flatten
- 初期値は
false
。true
にすると、割り当てられている要素が存在しない場合に、代わりに、中身のテキストを返す。
返り値
sequence<Node>
slot要素に割り当てられている要素を含む配列。割り当てられている要素がない場合、引数のflatten=true
なら代わりにテキストを含む配列、flatten=false
なら空の配列が返る。
脚注
boolean
真偽値(true
かfalse
)。
dictionary
指定できる値などの情報を定義しています。
optional
引数が省略可能であることを表します。
仕様書
https://html.spec.whatwg.org/multipage/scripting.html#htmlslotelement
説明
assignedNodes()は、Shadow Rootにあるslot要素に割り当てられている要素を返します。返り値は配列なのでご注意下さい。
HTML
<!-- Shadow Host -->
<div id="foo">
<span slot="yeah">Yeah!!</span>
</div>
<!-- Shadow Root -->
<template id="bar">
<slot name="yeah">SLOT1</slot>
<slot name="nope">SLOT2</slot>
</template>
JavaScript
// ホストを取得
var hostElement = document.getElementById( "foo" ) ;
// テンプレートを取得
var templeteContent = document.getElementById( "bar" ).content.cloneNode( true ) ;
// Shadow Rootの作成
var shadowRoot = hostElement.attachShadow( { mode: "open" } ) ;
// Shadow Rootにテンプレートの内容を追加
shadowRoot.appendChild( templeteContent ) ;
// 要素の取得
var element1 = shadowRoot.children[0] ; // <slot name="yeah">SLOT1</slot>
var element2 = shadowRoot.children[1] ; // <slot name="nope">SLOT2</slot>
// メソッドの実行
element1.assignedNodes() ; // [ <span slot="yeah">Yeah!!</span> ]
element2.assignedNodes() ; // []
引数にはオブジェクトを指定できます。flatten=true
にした場合、割り当てられている要素がない場合は、代わりに中身のテキストが返るようになります。
JavaScript
// メソッドの実行 (flatten=true)
element1.assignedNodes( { flatten: true } ) ; // [ <span slot="yeah">Yeah!!</span> ]
element2.assignedNodes( { flatten: true } ) ; // [ "SLOT2" ]
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】HTMLSlotElement.assignedNodes() - slot要素に割り当てられている要素</title>
<link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/HTMLSlotElement/assignedNodes/">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<script src="https://demo.syncer.jp/js/demo-web_api_interface.js"></script>
<script>
window.addEventListener( "load", function () {
syncer.setup ( {
method: {
execute: {
use: true ,
callback: [
{
function: (typeof myMethod === "function" ? myMethod : null) ,
}
] ,
} ,
} ,
error: {
use: true ,
} ,
console: {
use: true ,
} ,
} ) ;
} ) ;
</script>
<style>
body {
font: 400 15px/1.618 -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, メイリオ, meiryo, sans-serif ;
background-color: #fff ;
}
</style>
</head>
<body>
<p>メソッドを実行すると、assignedNodes()を実行し、Shadow Rootにあるslot要素に割り当てられている要素を配列で取得します。</p>
<div id="hoge">
<span slot="foo">Yeah!!</span>
</div>
<template id="fuga">
<slot name="foo">SLOT1</slot>
<slot name="bar">SLOT2</slot>
</template>
<script>
// assignedNodes()
function myMethod () {
// メソッドを実行 (element2でも試してみよう)
var returnValue = element1.assignedNodes( {
flatten: true ,
} ) ;
// 返り値を確認
console.log( "返り値", returnValue ) ;
}
// Shadow Rootを作成
var shadowRoot = document.getElementById( "hoge" ).attachShadow( { mode: "open" } ) ;
// Shadow Rootにテンプレートの内容を追加
shadowRoot.appendChild( document.getElementById( "fuga" ).content.cloneNode( true ) ) ;
// 要素を取得
var element1 = shadowRoot.children[0] ; // <slot name="foo">SLOT1</slot> (割り当てられた要素あり → <span slot="foo">Yeah!!</span>)
var element2 = shadowRoot.children[1] ; // <slot name="bar">SLOT2</slot> (割り当てられた要素なし)
</script>
</body>
</html>
デモ
サポート状況
HTMLSlotElement.assignedNodes()のサポート状況です。
ブラウザ | サポート状況 | ブラウザ | サポート状況 |
---|---|---|---|
Chrome | Supported 53+ | Firefox | Not Supported |
Edge | Not Supported | Internet Explorer | Not Supported |
Safari | Supported 10+ | Opera | Supported 40+ |
iOS Safari | Supported 10.0+ | Android | Not Supported |
Chrome
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
57 | Supported | 2017年3月頃 | 0.1% |
56 | Supported | 2017年1月頃 | 12.02% |
55 | Supported | 2016年12月頃 | 12.36% |
54 | Supported | 2016年10月頃 | 0.44% |
53 | Supported | 2016年9月頃 | 0.25% |
52 | Not Supported | 2016年7月頃 | 0.27% |
51 | Not Supported | 2016年6月頃 | 0.4% |
50 | Not Supported | 2016年4月頃 | 0.32% |
49 | Not Supported | 2016年3月頃 | 0.47% |
48 | Not Supported | 2016年1月頃 | 0.02% |
47 | Not Supported | 2015年12月頃 | 0.06% |
46 | Not Supported | 2015年10月頃 | 0.56% |
45 | Not Supported | 2015年9月頃 | 0.01% |
44 | Not Supported | 2015年7月頃 | 0.83% |
43 | Not Supported | 2015年5月頃 | 0.05% |
42 | Not Supported | 2015年4月頃 | 0.05% |
41 | Not Supported | 2015年3月頃 | 0.01% |
40 | Not Supported | 2015年1月頃 | 0.59% |
39 | Not Supported | 2014年11月頃 | 0.02% |
38 | Not Supported | 2014年10月頃 | 0.08% |
37 | Not Supported | 2014年8月頃 | 0.01% |
36 | Not Supported | 2014年7月頃 | 0.01% |
35 | Not Supported | 2014年5月頃 | 0.01% |
34 | Not Supported | 2014年4月頃 | 0.14% |
33 | Not Supported | 2014年2月頃 | 0.01% |
32 | Not Supported | 2014年1月頃 | 0% |
31 | Not Supported | 2013年11月頃 | 0.01% |
30 | Not Supported | 2013年10月頃 | 0.03% |
29 | Not Supported | 2013年8月頃 | 0% |
28 | Not Supported | 2013年6月頃 | 0.03% |
27 | Not Supported | 2013年5月頃 | 0.01% |
26 | Not Supported | 2013年3月頃 | 0% |
25 | Not Supported | 2013年2月頃 | 0% |
24 | Not Supported | 2013年1月頃 | 0% |
23 | Not Supported | 2012年11月頃 | 0% |
22 | Not Supported | 2012年9月頃 | 0% |
21 | Not Supported | 2012年7月頃 | 0% |
20 | Not Supported | 2012年6月頃 | 0% |
19 | Not Supported | 2012年5月頃 | 0% |
18 | Not Supported | 2012年3月頃 | 0.01% |
17 | Not Supported | 2012年2月頃 | 0.01% |
16 | Not Supported | 2011年12月頃 | 0% |
15 | Not Supported | 2011年10月頃 | 0% |
14 | Not Supported | 2011年9月頃 | 0% |
Firefox
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
52 | Not Supported | 2017年3月頃 | 0.12% |
51 | Not Supported | 2017年1月頃 | 1.7% |
50 | Not Supported | 2016年11月頃 | 0.78% |
49 | Not Supported | 2016年9月頃 | 0.02% |
48 | Not Supported | 2016年8月頃 | 0.07% |
47 | Not Supported | 2016年6月頃 | 0.03% |
46 | Not Supported | 2016年4月頃 | 0.01% |
45 | Not Supported | 2016年3月頃 | 0.1% |
44 | Not Supported | 2016年1月頃 | 0.01% |
43 | Not Supported | 2015年12月頃 | 0.02% |
42 | Not Supported | 2015年11月頃 | 0.01% |
41 | Not Supported | 2015年9月頃 | 0% |
40 | Not Supported | 2015年8月頃 | 0.02% |
39 | Not Supported | 2015年7月頃 | 0.01% |
38 | Not Supported | 2015年5月頃 | 0.02% |
37 | Not Supported | 2015年3月頃 | 0% |
36 | Not Supported | 2015年2月頃 | 0.01% |
35 | Not Supported | 2015年1月頃 | 0% |
34 | Not Supported | 2014年12月頃 | 0.01% |
33 | Not Supported | 2014年10月頃 | 0% |
32 | Not Supported | 2014年9月頃 | 0% |
31 | Not Supported | 2014年7月頃 | 0.01% |
30 | Not Supported | 2014年6月頃 | 0% |
29 | Not Supported | 2014年4月頃 | 0% |
28 | Not Supported | 2014年3月頃 | 0.01% |
27 | Not Supported | 2014年2月頃 | 0% |
26 | Not Supported | 2013年12月頃 | 0% |
25 | Not Supported | 2013年10月頃 | 0% |
24 | Not Supported | 2013年9月頃 | 0% |
23 | Not Supported | 2013年8月頃 | 0% |
22 | Not Supported | 2013年6月頃 | 0% |
21 | Not Supported | 2013年5月頃 | 0% |
20 | Not Supported | 2013年4月頃 | 0% |
19 | Not Supported | 2013年2月頃 | 0% |
18 | Not Supported | 2013年1月頃 | 0% |
17 | Not Supported | 2012年11月頃 | 0% |
16 | Not Supported | 2012年10月頃 | 0% |
15 | Not Supported | 2012年8月頃 | 0% |
14 | Not Supported | 2012年7月頃 | 0% |
13 | Not Supported | 2012年6月頃 | 0% |
12 | Not Supported | 2012年4月頃 | 0% |
11 | Not Supported | 2012年3月頃 | 0% |
10 | Not Supported | 2012年1月頃 | 0% |
9 | Not Supported | 2011年12月頃 | 0% |
8 | Not Supported | 2011年11月頃 | 0% |
7 | Not Supported | 2011年9月頃 | 0% |
6 | Not Supported | 2011年8月頃 | 0% |
5 | Not Supported | 2011年6月頃 | 0% |
4 | Not Supported | 2011年3月頃 | 0% |
Edge
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
14 | Not Supported | 2016年2月頃 | 1.05% |
13 | Not Supported | 2015年9月頃 | 0.08% |
Internet Explorer
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
11 | Not Supported | 2013年10月頃 | 4.99% |
10 | Not Supported | 2012年8月頃 | 0.09% |
9 | Not Supported | 2011年3月頃 | 0.18% |
8 | Not Supported | 2009年3月頃 | 0.04% |
7 | Not Supported | 2006年10月頃 | 0.01% |
6 | Not Supported | 2001年8月頃 | 0% |
Safari
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
10 | Supported | 2016年10月頃 | 0% |
9.1 | Not Supported | 2015年9月頃 | 0% |
8.0 | Not Supported | 2014年10月頃 | 0% |
7.1 | Not Supported | 2013年10月頃 | 0% |
6.0 | Not Supported | 2012年7月頃 | 0% |
5.1 | Not Supported | 2011年7月頃 | 0% |
4 | Not Supported | 2009年6月頃 | 0% |
Opera
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
43 | Supported | 2017年2月頃 | 0.06% |
42 | Supported | 2016年12月頃 | 0.09% |
41 | Supported | 2016年10月頃 | 0.01% |
40 | Supported | 2016年9月頃 | 0% |
39 | Not Supported | 2016年8月頃 | 0% |
38 | Not Supported | 2016年6月頃 | 0% |
37 | Not Supported | 2016年5月頃 | 0.01% |
36 | Not Supported | 2016年3月頃 | 0.01% |
35 | Not Supported | 2016年2月頃 | 0% |
34 | Not Supported | 2015年12月頃 | 0% |
33 | Not Supported | 2015年10月頃 | 0% |
32 | Not Supported | 2015年9月頃 | 0% |
31 | Not Supported | 2015年8月頃 | 0% |
30 | Not Supported | 2015年6月頃 | 0% |
29 | Not Supported | 2015年4月頃 | 0% |
28 | Not Supported | 2015年3月頃 | 0% |
27 | Not Supported | 2015年1月頃 | 0% |
26 | Not Supported | 2014年12月頃 | 0% |
25 | Not Supported | 2014年10月頃 | 0% |
24 | Not Supported | 2014年9月頃 | 0% |
23 | Not Supported | 2014年7月頃 | 0% |
22 | Not Supported | 2014年6月頃 | 0% |
21 | Not Supported | 2014年5月頃 | 0.01% |
20 | Not Supported | 2014年3月頃 | 0% |
19 | Not Supported | 2014年1月頃 | 0% |
18 | Not Supported | 2013年11月頃 | 0% |
17 | Not Supported | 2013年10月頃 | 0% |
16 | Not Supported | 2013年8月頃 | 0% |
15 | Not Supported | 2013年7月頃 | 0% |
12 | Not Supported | 2012年6月頃 | 0.02% |
11.6 | Not Supported | 2011年12月頃 | 0% |
11.1 | Not Supported | 2011年4月頃 | 0% |
iOS Safari
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
10.0 | Supported | 2016年9月頃 | 39.65% |
9.1 | Not Supported | 2015年9月頃 | 5.39% |
8.3 | Not Supported | 2014年9月頃 | 1.03% |
7.0 | Not Supported | 2013年9月頃 | 0.24% |
6.0 | Not Supported | 2012年9月頃 | 0.05% |
5.1 | Not Supported | 2011年10月頃 | 0.03% |
Android
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
4.4 | Not Supported | 2013年10月頃 | 0% |
4.3 | Not Supported | 2013年7月頃 | 0% |
4.2 | Not Supported | 2013年3月頃 | 0.03% |
4.1 | Not Supported | 2012年12月頃 | 0% |
4.0 | Not Supported | 2012年6月頃 | 1.61% |
2.3 | Not Supported | 2011年10月頃 | 0% |