blob: 47cbb74ec213fafc78756602532ca6c249b4230a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
---
title: Element.assignedSlot
slug: Web/API/Element/assignedSlot
tags:
- API
- プロパティ
- リファレンス
- Slottable
- ウェブコンポーネント
- assignedSlot
- シャドウ DOM
browser-compat: api.Element.assignedSlot
translation_of: Web/API/Element/assignedSlot
---
{{APIRef("Shadow DOM")}}
**`assignedSlot`** は {{domxref("Element")}} インターフェイスの読み取り専用プロパティで、
{{domxref("HTMLSlotElement")}} を返します。これは、そのノードが挿入された {{htmlelement("slot")}} 要素を表します。
## 構文
```js
var slotElement = elementInstance.assignedSlot
```
### 値
{{domxref('HTMLSlotElement')}} のインスタンス、または要素がスロットに割り当てられていない場合や、 {{domxref("ShadowRoot.mode", "mode")}} が `closed` に設定されている場合は `null` です（詳しくは {{domxref("Element.attachShadow")}} を参照してください）。
## 例
[simple-template の例](https://github.com/mdn/web-components-examples/tree/master/simple-template) ([ライブで表示](https://mdn.github.io/web-components-examples/simple-template/)) では、 `<my-paragraph>` という些細なカスタム要素の例を作りました。この要素にはシャドウルートが付けられ、次に `my-text` というスロットを含むテンプレートのコンテンツを使って入力されるようになっています。
文書内で `<my-paragraph>` が使用されると、スロットは `my-text` という値を持つ [`slot`](/ja/docs/Web/HTML/Global_attributes/slot) 属性を持つ要素内に含めることによって、 slotable 要素によって生成されることになります。以下はそのような例です。
```html
<my-paragraph>
<span slot="my-text">Let's have some different text!</span>
</my-paragraph>
```
JavaScript ファイルでは、上に示した {{htmlelement("span")}} への参照を取得し、 `<span>` が挿入された元の `<slot>` 要素への参照をログに記録しています。
```js
let slottedSpan = document.querySelector('my-paragraph span')
console.log(slottedSpan.assignedSlot); // logs '<slot name="my-text">'
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
|
