JavaScript Academy · Урок

Shadow DOM и инкапсуляция

Изолируйте стили и разметку в теневых корнях.

«Shadow DOM и инкапсуляция» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое теневой DOM

Теневой DOM предоставляет элементу приватное, изолированное дерево DOM. Разметка и стили внутри него отделены от остальной части страницы.

Внешний CSS не проникает внутрь.
Внутренний CSS не выходит наружу.
Внутренняя структура скрыта от обычных запросов к DOM.

attachShadow

Создайте теневое дерево, вызвав this.attachShadow({ mode: 'open' }). Этот вызов возвращает корень теневого DOM, который можно заполнять как обычный узел.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

Режим «открытый» и «закрытый»

Параметр mode управляет доступом извне:

'open' — корень доступен через element.shadowRoot.
'closed' — element.shadowRoot возвращает null; только Ваш код хранит ссылку на корень.

Большинство компонентов использует 'open' для более удобной отладки.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Заполнение корня теневого DOM

Задайте shadowRoot.innerHTML, чтобы создать изолированное содержимое. Эта разметка невидима для document.querySelector.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

Изолированные стили

Тег style внутри корня теневого DOM влияет только на этот корень. Такой же селектор за пределами компонента не затрагивается, а стили страницы не проникают внутрь.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

Селектор :host

В стилях теневого DOM :host выбирает сам пользовательский элемент — хост теневого дерева. Используйте его, чтобы стилизовать внешнюю область компонента.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

Изоляция стилей в действии

Изоляция означает, что авторы компонентов и страниц перестают конфликтовать из-за имён классов. Правило .title внутри одного компонента никогда не влияет на .title в другом месте.

Нет конфликтов глобального CSS.
Простые универсальные селекторы снова безопасны.

Запросы внутри корня теневого DOM

Чтобы получить доступ к внутренним узлам, выполняйте запрос к корню теневого DOM, а не к документу. Корень теневого DOM поддерживает те же методы запросов.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

События пересекают границу

Многие события, например click, всплывают из теневого DOM, но перенацеливаются, поэтому внешние обработчики видят хост-элемент, а не внутренний узел. Это сохраняет изоляцию.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

Наследуемые стили

Некоторые свойства CSS, например color и font-family, наследуются через границу теневого DOM, поскольку наследование распространяется вниз по составному дереву. Вы можете перенять оформление страницы, полагаясь на наследование или используя пользовательские свойства CSS.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Когда использовать теневой DOM

Используйте теневой DOM, когда для повторно используемого виджета нужна строгая изоляция стилей и разметки. Не используйте его, если хотите, чтобы компонент свободно наследовал глобальные стили страницы и участвовал в них.

Быстрая проверка

Проверьте, насколько Вы поняли теневой DOM.

Повторение

Вы узнали о теневом DOM:

attachShadow({ mode }) создаёт изолированное дерево.
'open' раскрывает shadowRoot, а 'closed' скрывает его.
Внутренние теги style действуют в пределах корня, а :host стилизует сам элемент.
Запросы выполняются относительно корня теневого DOM, а не документа.
События перенацеливаются, чтобы сохранить изоляцию.

Далее мы повторно используем разметку с помощью шаблонов и слотов.

Часто задаваемые вопросы

Урок «Shadow DOM и инкапсуляция» бесплатный?

Да — полный текст урока «Shadow DOM и инкапсуляция» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Shadow DOM и инкапсуляция»?

Изолируйте стили и разметку в теневых корнях. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Shadow DOM и инкапсуляция»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy