composed

Свойство composed события возвращает булево значение, которое указывает, может ли событие пересекать границы Shadow DOM и распространяться в обычный DOM.

        
          
          <div id="open-shadow"></div><div id="closed-shadow"></div>
          <div id="open-shadow"></div>
<div id="closed-shadow"></div>

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

        
          
          const openHost = document.getElementById('open-shadow');const openRoot = openHost.attachShadow({ mode: 'open' });openRoot.innerHTML = '<button>Открытый дом</button>';const closedHost = document.getElementById('closed-shadow');const closedRoot = closedHost.attachShadow({ mode: 'closed' });closedRoot.innerHTML = '<button>Закрытый дом</button>
          const openHost = document.getElementById('open-shadow');
const openRoot = openHost.attachShadow({ mode: 'open' });
openRoot.innerHTML = '<button>Открытый дом</button>';

const closedHost = document.getElementById('closed-shadow');
const closedRoot = closedHost.attachShadow({ mode: 'closed' });
closedRoot.innerHTML = '<button>Закрытый дом</button>

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

        
          
          event.composed
          event.composed

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

Свойство доступно только для чтения и возвращает true или false.

Свойство composed определяет поведение события при пересечении границ Shadow DOM:

• true — событие может пересекать границы Shadow DOM и распространяться в обычный DOM
• false — событие останавливается на границе Shadow DOM

Все события пользовательского интерфейса (click, touch, mouseover, copy, paste и др.) имеют composed: true. Большинство других типов событий имеют composed: false.

Распространение происходит только если свойство bubbles также равно true.

💡 Все события пользовательского интерфейса автоматически имеют composed: true.
💡 События, созданные программно, по умолчанию имеют composed: false, если не указано иное.
💡 Используйте метод composedPath() для определения пути распространения события через Shadow DOM.
💡 Даже если composed: true, события не могут проникнуть в закрытый Shadow DOM.