Прослушивание событий от веб-компонентов не работает ⇐ CSS

[Anonymous]

Я пытаюсь заставить мой веб-компонент взаимодействовать с внешним миром посредством событий. Пока что отправка событий кажется нормальной, но по какой-то причине не получение событий.
Я уже пробовал много вариантов с пузырьками и композицией, а также прикрепил эмиттер к ShadowRoot веб-компонента, но это не сработало.
Что мне здесь не хватает? (Также: почему цвет фона контейнера ниже не желтый?)

Код: Выделить всё

class HookbanContainer extends HTMLElement {
connectedCallback() {
const template = document.createElement("template")
template.innerHTML = /* html */ `

:host {
background-color: yellow;
}



`

const shadowRoot = this.attachShadow({ mode: "open" })
shadowRoot.appendChild(template.content.cloneNode(true))

shadowRoot.addEventListener(
"hookban-test",
(e) => console.log("test", e)
)
}
}

customElements.define("hookban-container", HookbanContainer)

Код: Выделить всё

hello


Trigger Event


const triggerEvtButton = document.querySelector("button")

triggerEvtButton.onclick = () => {
document.dispatchEvent(
new CustomEvent("hookban-test", {
bubbles: true,
composed: true,
detail: {
content: "test"
}
})
)
}

Подробнее здесь: https://stackoverflow.com/questions/785 ... ot-working