Атрибут shadowrootmode тега <template>

Описание

Атрибут shadowrootmode позволяет создавать Shadow DOM прямо из HTML-разметки без JavaScript. Это часть Declarative Shadow DOM - новой возможности, которая упрощает создание изолированных компонентов.

Пример использования:
<div class="my-component"> <template shadowrootmode="open"> <style> h2 { color: blue; } </style> <h2>Заголовок внутри Shadow DOM</h2> <slot></slot> </template> <p>Этот контент будет в слоте</p> </div>

Значения атрибута:

Значение Описание Когда использовать
open Создаёт открытый Shadow DOM Когда нужно разрешить доступ к Shadow DOM извне
closed Создаёт закрытый Shadow DOM Для полной изоляции компонента

Особенности работы:

  • Работает только в поддерживающих браузерах (Chrome, Edge, Firefox с 2023)
  • Автоматически создаёт Shadow Root при парсинге HTML
  • Изолирует стили внутри шаблона от внешнего CSS
  • Позволяет использовать слоты для композиции

Пример с закрытым Shadow DOM:

<div class="private-component"> <template shadowrootmode="closed"> <style> p { border: 1px solid red; } </style> <p>Этот контент полностью изолирован</p> </template> </div>

Рекомендации:

  • Используйте open для большинства случаев
  • Закрытый режим (closed) затрудняет тестирование
  • Комбинируйте с CSS-переменными для настройки стилей
  • Добавляйте fallback для старых браузеров

Ограничения:

  • Требует полифила для полной кросс-браузерности
  • Закрытый режим делает компонент полностью непрозрачным
  • Сложности с глобальными стилями и темами

Пример с полифилом:

<script src="https://unpkg.com/@webcomponents/template-shadowroot/template-shadowroot.js"></script> <div class="polyfilled-component"> <template shadowrootmode="open"> <p>Работает даже в старых браузерах с полифилом</p> </template> </div>

Примечание: Для полной кросс-браузерной поддержки рассмотрите:

  • Полифил @webcomponents/template-shadowroot
  • Использование веб-компонентов через JavaScript
  • Фреймворки с поддержкой Shadow DOM (Lit, Stencil)