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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
---
title: Event.composed
slug: Web/API/Event/composed
tags:
- プロパティ
- Read-only
- リファレンス
browser-compat: api.Event.composed
---
{{APIRef("Shadow DOM")}}
**`composed`** は {{domxref("Event")}} インターフェイスの読み取り専用のプロパティで、イベントがシャドウ DOM 境界を越えて標準 DOM に伝搬するかどうかを示す論理値を返すものです。
UA から送られるすべての UI イベントは合成されます (クリック/タッチ/マウスオーバー/コピー/ペーストなど)。他のほとんどの種類のイベントは合成されないので、`false` を返します。これには、例えば `composed` オプションを `true` に設定せずに作成された合成イベントも含まれます。
伝搬は {{domxref("Event.bubbles", "bubbles")}} プロパティが `true` である場合にのみ発生します。ただし、合成されたイベントのみをキャプチャした場合は、ホスト側でも `AT_TARGET` フェーズであるかのように処理されます。イベントがシャドウルートを通って DOM ルートに到達するパスを決定するには、 {{domxref("Event.composedPath", "composedPath()")}} を呼び出すことで行えます。
## 値
論理値で、イベントがシャドウルート（つまり、シャドウ DOM の中で、イベントが伝搬し始めた最初のノード）に到達した後、シャドウ DOM から標準 DOM に伝播する場合は `true` となります。
この値が `false` の場合、シャドウルートはイベントが提供される最後のノードとなります。
## 例
この[例](https://mdn.github.io/web-components-examples/composed-composed-path/)では、`<open-shadow>` と `<closed-shadow>` という 2 つの些細なカスタム要素を定義しています。どちらも text 属性の内容を `<p>` 要素のテキストコンテンツとして、要素のシャドウ DOM に挿入します。両者の唯一の違いは、シャドウルートがそれぞれ `open` と `closed` に設定された状態で取り付けられることです。
最初の定義は次のようになります。
```js
customElements.define('open-shadow',
class extends HTMLElement {
constructor() {
super();
let pElem = document.createElement('p');
pElem.textContent = this.getAttribute('text');
let shadowRoot = this.attachShadow({mode: 'open'})
.appendChild(pElem);
}
});
```
それからそれぞれの要素を 1 つずつをページに挿入します。
```html
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>
```
それから click イベントリスナーを `<html>` 要素に設定します。
```js
document.querySelector('html').addEventListener('click',function(e) {
console.log(e.composed);
console.log(e.composedPath());
});
```
まず `<open-shadow>` 要素をクリックし、次に `<closed-shadow>` 要素をクリックすると、 2 つのことに気がつきます。
1. `click` イベントは常にシャドウの境界を越えて伝搬することができるため、 `composed` プロパティは `true` を返します。
2. 2 つの要素の `composedPath` の値に違いがあります。
`<open-shadow>` 要素の合成パスは次の通りです。
```plain
Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
```
それに対して `<closed-shadow>` 要素の合成パスは次の通りです。
```plain
Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
```
2 番目の場合、イベントリスナーは `<closed-shadow>` 要素自身までしか伝搬せず、シャドウ境界の内側のノードには伝搬しません。
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
|
