DOM event.composed (shadow root 밖으로 이벤트 전파시키기)

 

📌 CustomEvent 가 shadow root 밖으로 전파되지 않는다?

shadow DOM 과 함께 작업하다보면 CustomEvent 로 생성한 이벤트가 shadow DOM boundary 를 벗어나서 전파 되지 않는 이슈를 마주하게 되는데, 이는 의도된 동작입니다.

 

예시로 살펴봅시다.

다음과 같은 menu 컴포넌트가 있다고 하겠습니다.

재사용성을 위해 공통 메뉴 로직을 담은 컴포넌트입니다.

코드는 단순화시켰지만, open 속성이 true 가 되면 해당 메뉴 엘리먼트의 overlay 선택시에

메뉴를 닫기 위한 커스텀 이벤트를 발생시키는 핸들러를 부착하는 흐름으로 진행됩니다.

 

export default class MyMenu extends HTMLElement {
    // ... other logics

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'open') {
            this.setOverlayEvent()
        }        
    }

    setOverlayEvent() {
        // ... other logics

        const onCloseHandler = this.onClose.bind(this)
        document.addEventListener('touchstart', onCloseHandler, { once: true })
    }

    onClose() {
        this.dispatchEvent(new CustomEvent('close:menu', { bubbles: true }))
    }
}

 

이제 해당 컴포넌트를 확장한 color-menu 컴포넌트를 정의하겠습니다.

 

export default class MyColorMenu extends MyMenu {
    // ... web component initialize logics
}

 

예상하기로는 menu 컴포넌트의 close:menu 이벤트를 상위 DOM 으로 버블링시켜야하는데, 예상대로 동작하지 않습니다.

 

📌 왜 이렇게 동작할까?

이는 DOM 표준 스펙에 정의된 이벤트의 옵션 객체를 살펴보면 힌트를 얻을 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Event/Event

Event: Event() constructor - Web APIs | MDN

💡Event composed
A boolean value indicating whether the event will trigger listeners outside of a shadow root.
The default is `false`
(see https://developer.mozilla.org/en-US/docs/Web/API/Event/composed for more details)

CustomEvent 의 경우 기본 Event 인터페이스를 상속하며, composed 기본값으로 false 를 가지고 있기 때문에 shadow root 상위로 이벤트가 전파되지 않습니다.

 

📌 해결 방법은?

만약 shadow root 밖으로 CustomEvent 를 이벤트를 전파시키고 싶다면 이벤트를 생성해줄 때 composed: true 를 함께 전달해주면 됩니다.

 

this.dispatchEvent(
    new CustomEvent('close:menu', { 
        bubbles: true, 
        composed: true // ✅ shadow root 밖으로 전달
    })
)

 

📌 참고자료

Shadow DOM and events

Event: composed property - Web APIs | MDN