Enter
    Расширенный поиск
    Клавиша / esc

    JavaScript

    ShadowRoot

    Корневой узел Shadow DOM, который создаёт изолированное дерево DOM для кастомных элементов.

    Время чтения: 5 мин

    Кратко

    Скопировано

    ShadowRoot — это корневой узел Shadow DOM, который создаёт изолированное дерево DOM, отделённое от основного документа. Позволяет инкапсулировать стили и структуру кастомных элементов.

    Пример

    Скопировано
            
          
          class MyCard extends HTMLElement {  constructor() {    super();    const shadow = this.attachShadow({ mode: 'open' });    shadow.innerHTML = `      <style>        :host {          display: block;          border: 1px solid #ccc;          padding: 16px;          border-radius: 8px;        }        .title {          font-weight: bold;          color: #333;        }      </style>      <div class="title">        <slot name="title">Заголовок</slot>      </div>      <div class="content">        <slot>Содержимое карточки</slot>      </div>    `;  }}customElements.define('my-card', MyCard);
          class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 16px;
          border-radius: 8px;
        }
        .title {
          font-weight: bold;
          color: #333;
        }
      </style>
      <div class="title">
        <slot name="title">Заголовок</slot>
      </div>
      <div class="content">
        <slot>Содержимое карточки</slot>
      </div>
    `;
  }
}

customElements.define('my-card', MyCard);

        
        
          
        
      
            
          
          <my-card>  <span slot="title">Моя карточка</span>  <p>Это содержимое карточки</p></my-card>
          <my-card>
  <span slot="title">Моя карточка</span>
  <p>Это содержимое карточки</p>
</my-card>
    Открыть демо в новой вкладке

    Как пишется

    Скопировано
            
          
          // Создание ShadowRootconst shadow = element.attachShadow({ mode: 'open' });// Доступ к существующему ShadowRootconst shadowRoot = element.shadowRoot;// Работа с содержимымshadowRoot.innerHTML = '<div>Содержимое</div>';shadowRoot.appendChild(element);
          // Создание ShadowRoot
const shadow = element.attachShadow({ mode: 'open' });

// Доступ к существующему ShadowRoot
const shadowRoot = element.shadowRoot;

// Работа с содержимым
shadowRoot.innerHTML = '<div>Содержимое</div>';
shadowRoot.appendChild(element);

    Параметры attachShadow()

    Скопировано
    • mode — режим доступа:
      • open — ShadowRoot доступен через element.shadowRoot
      • closed — ShadowRoot недоступен извне

    Свойства

    Скопировано

    • activeElement

      Скопировано

    Возвращает элемент в Shadow Tree, который имеет фокус.

            
          
          const focusedElement = shadowRoot.activeElement;console.log(focusedElement); // Элемент с фокусом или null
          const focusedElement = shadowRoot.activeElement;
console.log(focusedElement); // Элемент с фокусом или null

    • adoptedStyleSheets

      Скопировано

    Массив конструктивных таблиц стилей для использования в Shadow DOM.

            
          
          const stylesheet = new CSSStyleSheet();stylesheet.replaceSync('div { color: red; }');shadowRoot.adoptedStyleSheets = [stylesheet];
          const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('div { color: red; }');
shadowRoot.adoptedStyleSheets = [stylesheet];

    • clonable

      Скопировано

    Булево значение, указывающее, можно ли клонировать ShadowRoot.

            
          
          console.log(shadowRoot.clonable); // true или false
          console.log(shadowRoot.clonable); // true или false

    • delegatesFocus

      Скопировано

    Булево значение, указывающее, делегирует ли ShadowRoot фокус при выборе нефокусируемого узла.

            
          
          console.log(shadowRoot.delegatesFocus); // true или false
          console.log(shadowRoot.delegatesFocus); // true или false

    • fullscreenElement

      Скопировано

    Элемент, который в данный момент находится в полноэкранном режиме в этом Shadow Tree.

            
          
          const fullscreenEl = shadowRoot.fullscreenElement;console.log(fullscreenEl); // Элемент в полноэкранном режиме или null
          const fullscreenEl = shadowRoot.fullscreenElement;
console.log(fullscreenEl); // Элемент в полноэкранном режиме или null

    • host

      Скопировано

    Возвращает ссылку на DOM-элемент, к которому прикреплён ShadowRoot.

            
          
          const hostElement = shadowRoot.host;console.log(hostElement); // Элемент-хост
          const hostElement = shadowRoot.host;
console.log(hostElement); // Элемент-хост

    • innerHTML

      Скопировано

    Устанавливает или возвращает содержимое ShadowRoot.

            
          
          // Получение содержимогоconsole.log(shadowRoot.innerHTML);// Установка содержимогоshadowRoot.innerHTML = '<div>Новое содержимое</div>';
          // Получение содержимого
console.log(shadowRoot.innerHTML);

// Установка содержимого
shadowRoot.innerHTML = '<div>Новое содержимое</div>';

    • mode

      Скопировано

    Режим ShadowRoot: open или closed.

            
          
          console.log(shadowRoot.mode); // 'open' или 'closed'
          console.log(shadowRoot.mode); // 'open' или 'closed'

    • pictureInPictureElement

      Скопировано

    Элемент в Shadow Tree, который в данный момент представлен в режиме "картинка в картинке".

            
          
          const pipElement = shadowRoot.pictureInPictureElement;console.log(pipElement); // Элемент в PiP режиме или null
          const pipElement = shadowRoot.pictureInPictureElement;
console.log(pipElement); // Элемент в PiP режиме или null

    • serializable

      Скопировано

    Булево значение, указывающее, можно ли сериализовать ShadowRoot.

            
          
          console.log(shadowRoot.serializable); // true или false
          console.log(shadowRoot.serializable); // true или false

    • slotAssignment

      Скопировано

    Тип назначения слотов: manual или named.

            
          
          console.log(shadowRoot.slotAssignment); // 'manual' или 'named'
          console.log(shadowRoot.slotAssignment); // 'manual' или 'named'

    • styleSheets

      Скопировано

    Список CSSStyleSheet объектов для таблиц стилей в Shadow Tree.

            
          
          const stylesheets = shadowRoot.styleSheets;console.log(stylesheets.length); // Количество таблиц стилей
          const stylesheets = shadowRoot.styleSheets;
console.log(stylesheets.length); // Количество таблиц стилей

    Методы

    Скопировано

    • getAnimations()

      Скопировано

    Возвращает массив всех активных анимаций в Shadow Tree.

            
          
          const animations = shadowRoot.getAnimations();animations.forEach(animation => {  console.log(animation.animationName);});
          const animations = shadowRoot.getAnimations();
animations.forEach(animation => {
  console.log(animation.animationName);
});

    События

    Скопировано

    ShadowRoot поддерживает события через всплытие от HTMLSlotElement:

    • slotchange

      Скопировано

    Событие, которое срабатывает при изменении содержимого слота.

            
          
          shadowRoot.addEventListener('slotchange', (event) => {  console.log('Содержимое слота изменилось');});
          shadowRoot.addEventListener('slotchange', (event) => {
  console.log('Содержимое слота изменилось');
});

    Как понять

    Скопировано

    ShadowRoot создаёт изолированное дерево DOM, которое:

    • Инкапсулирует стили — CSS внутри Shadow DOM не влияет на внешние элементы
    • Скрывает структуру — внутренние элементы недоступны из основного DOM
    • Обеспечивает переиспользование — компонент работает независимо от контекста

    Основные концепции:

    Скопировано
    • Хост-элемент — элемент, к которому прикреплён ShadowRoot
    • Shadow Tree — дерево DOM внутри ShadowRoot
    • Light DOM — обычные дочерние элементы хост-элемента
    • Слоты — точки вставки Light DOM в Shadow Tree

    Подсказки

    Скопировано

    💡 Доступ к ShadowRoot возможен только если mode: 'open'.
    💡 Используйте <slot> для вставки Light DOM в Shadow Tree.
    💡 Стили в Shadow DOM не проникают наружу, но внешние стили могут влиять на :host.
    💡 Используйте mode: 'open' для отладки, mode: 'closed' для максимальной инкапсуляции.

    Поддержка в браузерах:
    О Baseline

    Читайте также

    • .attachShadow()

      Создаёт и прикрепляет Shadow DOM к элементу, позволяя инкапсулировать стили и разметку

    • <slot>

      Место для вставки пользовательского контента в Web Components.

    • ::slotted()

      Псевдоэлемент ::slotted() позволяет стилизовать элементы, переданные во внешний слот веб-компонента