composedPath()

Метод composedPath() возвращает массив объектов EventTarget, через которые будет распространяться событие. В массив не включаются узлы из закрытых Shadow DOM.

        
          
          customElements.define('open-shadow', class extends HTMLElement {  constructor() {    super();    const p = document.createElement('p');    p.textContent = this.getAttribute('text');    const shadow = this.attachShadow({ mode: 'open' });    shadow.appendChild(p);  }});customElements.define('closed-shadow', class extends HTMLElement {  constructor() {    super();    const p = document.createElement('p');    p.textContent = this.getAttribute('text');    const shadow = this.attachShadow({ mode: 'closed' });    shadow.appendChild(p);  }});document.addEventListener('click', (e) => {  console.log('composedPath:', e.composedPath());});
          customElements.define('open-shadow', class extends HTMLElement {
  constructor() {
    super();
    const p = document.createElement('p');
    p.textContent = this.getAttribute('text');

    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(p);
  }
});

customElements.define('closed-shadow', class extends HTMLElement {
  constructor() {
    super();
    const p = document.createElement('p');
    p.textContent = this.getAttribute('text');

    const shadow = this.attachShadow({ mode: 'closed' });
    shadow.appendChild(p);
  }
});

document.addEventListener('click', (e) => {
  console.log('composedPath:', e.composedPath());
});

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <open-shadow text="Открытый Shadow DOM"></open-shadow><closed-shadow text="Закрытый Shadow DOM"></closed-shadow>
          <open-shadow text="Открытый Shadow DOM"></open-shadow>
<closed-shadow text="Закрытый Shadow DOM"></closed-shadow>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          event.composedPath()
          event.composedPath()

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Метод не принимает параметров и возвращает массив объектов EventTarget.

Метод composedPath() показывает полный путь распространения события от целевого элемента до корня документа:

• Открытый Shadow DOM: Включает все узлы, включая элементы внутри Shadow DOM
• Закрытый Shadow DOM: Исключает узлы из закрытого Shadow DOM

Путь всегда начинается с целевого элемента и заканчивается Window.

💡 Метод работает только с событиями, которые имеют composed: true.
💡 Используйте composedPath() для отладки распространения событий в сложных компонентах.
💡 Для закрытого Shadow DOM путь будет: [кастомный-элемент, body, html, document, window].
💡 Для открытого Shadow DOM путь будет: [элемент, ShadowRoot, кастомный-элемент, body, html, document, window].