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