Can I access a live region in light DOM from shadow DOM?

posted on

Back to overview


There's nothing much to say except that accessing the document from within a component's shadow DOM is possible.

class TheButton extends HTMLElement {
constructor() {
this.shadow = this.attachShadow({ mode: "open" })

const button = document.createElement("button")
button.textContent = 'Random name'
button.addEventListener('click', this._updateLiveRegion)


_updateLiveRegion( ) {
const names = ['Luffy', 'Nami', 'Zoro', 'Usopp', 'Sanji']
const randomName = names[Math.floor(Math.random() * names.length)]
document.querySelector('output').textContent = randomName

customElements.define("the-button", TheButton)

Back to overview