.shadowRoot

Свойство .shadowRoot возвращает корневой узел Shadow DOM, если он был создан через .attachShadow() с mode: "open". В противном случае — возвращает null.

        
          
          <my-box></my-box><script>  class MyBox extends HTMLElement {    constructor() {      super()      this.attachShadow({ mode: 'open' })      this.shadowRoot.innerHTML = `<p>Это из теневого DOM</p>`    }  }  customElements.define('my-box', MyBox)  document.addEventListener('DOMContentLoaded', () => {    const el = document.querySelector('my-box')    console.log(el.shadowRoot) // 👉 ShadowRoot {...}  })</script>
          <my-box></my-box>

<script>
  class MyBox extends HTMLElement {
    constructor() {
      super()
      this.attachShadow({ mode: 'open' })
      this.shadowRoot.innerHTML = `<p>Это из теневого DOM</p>`
    }
  }

  customElements.define('my-box', MyBox)

  document.addEventListener('DOMContentLoaded', () => {
    const el = document.querySelector('my-box')
    console.log(el.shadowRoot) // 👉 ShadowRoot {...}
  })
</script>

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

        
          
          const shadow = element.shadowRoot
          const shadow = element.shadowRoot

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

Если Shadow DOM не был создан или создан с mode: "closed" — вернётся null.

Теневой DOM изолирует разметку и стили внутри компонента. Но доступ к нему возможен, только если он открыт (mode: 'open').

Если вы пишете:

        
          
          this.attachShadow({ mode: 'closed' })
          this.attachShadow({ mode: 'closed' })

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

То element.shadowRoot всегда будет null, даже если Shadow DOM существует.

💡 Вы можете использовать shadowRoot для динамического обновления содержимого внутри компонента:

        
          
          this.shadowRoot.querySelector('p').textContent = 'Новый текст'
          this.shadowRoot.querySelector('p').textContent = 'Новый текст'

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

💡 В дебаггере браузера shadowRoot удобно смотреть прямо в DOM-панели — откройте компонент и разверните вложенный #shadow-root.