Атрибут slot тега <template>
Описание
Атрибут slot в теге <template> позволяет связать шаблон с определённым слотом в веб-компоненте. Это часть механизма теневого DOM (Shadow DOM) для создания переиспользуемых компонентов.
<!-- Определение веб-компонента -->
<template id="user-card">
<div class="card">
<slot name="username">Имя пользователя</slot>
<slot name="email">email@example.com</slot>
</div>
</template>
<!-- Использование с атрибутом slot -->
<user-card>
<template slot="username">Иван Иванов</template>
<template slot="email">ivan@example.com</template>
</user-card>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
имя_слота |
Имя слота, определённого в веб-компоненте | Для связывания контента с конкретным слотом |
Особенности работы:
- Работает только внутри веб-компонентов
- Требует поддержки Shadow DOM в браузере
- Контент без slot будет помещён в default slot (если он есть)
- Поддерживается всеми современными браузерами
Пример с несколькими слотами:
<template id="article-template">
<article>
<h2><slot name="title">Заголовок</slot></h2>
<div><slot name="content">Содержимое</slot></div>
<footer><slot name="author">Автор</slot></footer>
</article>
</template>
<my-article>
<template slot="title">Новости технологий</template>
<template slot="content">Сегодня произошло важное событие...</template>
<template slot="author">Редакция TechNews</template>
</my-article>
Рекомендации:
- Давайте слотам осмысленные имена
- Предусматривайте fallback-контент внутри slot в шаблоне
- Используйте CSS для стилизации слотов
- Документируйте слоты при создании веб-компонентов
Ограничения:
- Не работает без JavaScript
- Может потребоваться полифил для старых браузеров
- Сложности с SEO-индексацией содержимого в слотах
Примечание: Для сложных сценариев работы с веб-компонентами рассмотрите использование фреймворков:
- LitElement
- Stencil
- Svelte
- Angular Elements