Атрибут slot тега <aside>
Описание
Атрибут slot используется для проекции контента в определенные слоты шаблона веб-компонента. Применяется к элементам внутри <aside> или к самому <aside>, когда он является частью веб-компонента.
Пример использования:
<!-- Веб-компонент с слотами -->
<script>
class CustomPanel extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>
.panel {
border: 1px solid #ddd;
padding: 1rem;
margin: 1rem 0;
}
header {
font-size: 1.2em;
margin-bottom: 0.5rem;
}
</style>
<aside class="panel">
<header><slot name="header">Заголовок по умолчанию</slot></header>
<div class="content"><slot>Содержимое по умолчанию</slot></div>
</aside>
`;
}
}
customElements.define('custom-panel', CustomPanel);
</script>
<!-- Использование с проекцией в слоты -->
<custom-panel>
<h3 slot="header">Мой заголовок</h3>
<p>Основное содержимое панели</p>
</custom-panel>
Основные возможности:
| Характеристика | Описание |
|---|---|
| Именованные слоты | <slot name="header"> + slot="header" |
| Слот по умолчанию | <slot> без name для непроектированного контента |
| Множественное использование | Несколько элементов могут указывать на один слот |
| Наследование | Слоты могут быть вложенными |
Ограничения:
- Работает только внутри Shadow DOM
- Не поддерживается в Internet Explorer
- Стилизация слотов требует использования ::slotted()
Практические примеры:
<!-- Компонент карточки -->
<script>
class InfoCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>
.card {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 1.5rem;
}
.icon { font-size: 2em; }
</style>
<aside class="card">
<div class="icon"><slot name="icon">ℹ️</slot></div>
<h3><slot name="title">Информация</slot></h3>
<div class="content"><slot></slot></div>
</aside>
`;
}
}
customElements.define('info-card', InfoCard);
</script>
<!-- Использование карточки -->
<info-card>
<span slot="icon">✨</span>
<span slot="title">Важное уведомление</span>
<p>Этот компонент демонстрирует гибкую систему слотов.</p>
<p>Вы можете поместить сюда любой HTML-контент.</p>
</info-card>
Стилизация слотов:
<script>
class StyledAside extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>
::slotted(h3) {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
::slotted(p) {
font-size: 0.9rem;
line-height: 1.6;
}
::slotted(.highlight) {
background-color: #fffde7;
}
</style>
<aside>
<slot></slot>
</aside>
`;
}
}
customElements.define('styled-aside', StyledAside);
</script>
<styled-aside>
<h3>Заголовок</h3>
<p>Обычный абзац</p>
<p class="highlight">Выделенный абзац</p>
</styled-aside>
Лучшие практики:
- Используйте осмысленные имена для слотов
- Предоставляйте контент по умолчанию
- Документируйте доступные слоты компонента
- Сочетайте с CSS-переменными для кастомизации
Примечание: Атрибут slot является частью спецификации Shadow DOM и поддерживается всеми современными браузерами. Для максимальной совместимости с устаревшими браузерами рассмотрите использование полифилов или альтернативных подходов к композиции компонентов.