JavaScript свойство Event.composed

Определение и применение

JavaScript свойство composed объекта Event возвращает логическое значение, которое указывает, будет ли событие распространяться через границу теневого DOM в основное дерево DOM.

Значение true разрешает пути события пересекать границу теневого дерева. Всплытие отдельно определяется bubbles; на хосте возможна обработка при захвате даже без всплытия. У событий, созданных через new Event(), composed по умолчанию равно false. Не все события интерфейса пользователя имеют одинаковые настройки.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2020 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Event.composed

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
composed	✓53	✓79	✓52…	✓40	✓10	✓53	✓52…	✓41	✓10	✓6.0	✓53	✓10

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

event.composed;

Спецификация

DOM Standard.

Пример использования

Выход события за границу теневого дерева

Нажмите ▶, затем кликните по первому абзацу (открытое теневое дерево), по второму (закрытое) и по свободному месту результата. Сравните в консоли значение composed и состав пути composedPath().

index.html

HTML

<my-open-shadow></my-open-shadow>
<my-close-shadow></my-close-shadow>

main.js

JavaScript

customElements.define(
    'my-open-shadow', // создаем собственный HTML элемент my-open-shadow
    class extends HTMLElement {
        // создаем дочерний класс, который расширяет класс HTMLElement
        constructor() {
            super() // вызываем родительский конструктор

            let p = document.createElement('p') // создаем элемент p
            p.textContent = 'My custom element' // добавляем элементу p текстовое содержимое

            let shadowRoot = this.attachShadow({ mode: 'open' }) // прикрепляем теневое дерево DOM к элементу my-open-shadow (используем режим open)
                .appendChild(p) // добавляем созданный элемент в теневое дерево DOM
        }
    },
)

customElements.define(
    'my-close-shadow', // создаем собственный HTML элемент my-close-shadow
    class extends HTMLElement {
        // создаем дочерний класс, который расширяет класс HTMLElement
        constructor() {
            super() // вызываем родительский конструктор

            let p = document.createElement('p') // создаем элемент p
            p.textContent = 'My custom element 2' // добавляем элементу p текстовое содержимое

            let shadowRoot = this.attachShadow({ mode: 'closed' }) // прикрепляем теневое дерево DOM к элементу my-close -shadow (используем режим closed)
                .appendChild(p) // добавляем созданный элемент в теневое дерево DOM
        }
    },
)

document.addEventListener('click', function (event) {
    // регистрируем обработчик события "click" для документа
    console.log('Событие ' + event.type + ' composed = ' + event.composed) // выводим в консоль тип события и значение свойства composed
    console.log(event.composedPath()) // выводим в консоль путь события, представляющий собой массив объектов, на которых будут вызваны обработчики событий
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

Свойство customElements (объект CustomElementRegistry) позволяет описывать собственные HTML теги и задавать то, как элементы, создаваемые с помощью этих тегов, будут выглядеть на экране. С помощью метода интерфейса define() мы определим два новых элемента my-open-shadow и my-close-shadow, которые используют созданный с помощью метода createElement() элемент <p> в качестве содержимого для своего теневого DOM. Для этого мы использовали методы attachShadow() для прикрепления теневого DOM к элементу, и метод appendChild() для вставки созданного элемента <p> к теневому корню.

Обратите внимание на то, что при прикреплении теневого дерева DOM к элементу my-open-shadow мы используем режим "open", а для элемента my-close-shadow мы используем режим "closed". Метод composedPath() не включает узлы в теневых DOM (shadow DOM), если теневой корень (shadow root) был создан с режимом "closed".

Кроме того, с помощью метода addEventListener() зарегистрировали обработчики события "click" (нажатие левой кнопкой мыши на элементе) для документа. При срабатывании этого события мы с использованием свойства composed выводим в консоль логическое значение, которое указывает, будет ли событие распространяться через границу теневого DOM в основное дерево DOM, а с использованием метода composedPath() выводим в консоль путь события, представляющий собой массив объектов, через которые проходит событие; наличие и вызов обработчиков на каждом узле не гарантируются.

Сравните выводы в консоли: в первом случае мы производим клик непосредственно по первому элементу <p> (теневой корень (shadow root) был создан с режимом "open"), во втором по второму элементу <p> (теневой корень (shadow root) был создан с режимом "closed"), и в третьем уже по документу, кроме того для вывода типа события в консоль мы используем свойство type объекта Event.