Play IT

Web Components

Интерактивное демо «Web Components» — раздел Энциклопедия · Данные и разметка.

data-markupencyclopedia

Web Components

Custom element + Shadow DOM + slot

Разметка
<my-card title="Hello">
  <span slot="body">Slot content</span>
</my-card>
Preview
Content from light DOM → slot

Shadow DOM изолирует стили; слоты пробрасывают разметку из light DOM внутрь компонента.