Работа со слотами в Shadow DOM
📅
Слоты (<slot>) — это специальный механизм Shadow DOM, который позволяет вставлять внешний контент (из Light DOM) внутрь Shadow DOM. Это ключевой инструмент для создания гибких и переиспользуемых компонентов. ✔️
Что такое слоты?
- Слот — это «плейсхолдер» в Shadow DOM, куда вставляется контент из внешнего DOM.
- Позволяет компоненту принимать и отображать пользовательский контент, сохраняя инкапсуляцию.
- Слоты поддерживают именование, чтобы вставлять контент в конкретные места.
Пример базового слота
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
::slotted(*) {
color: green;
font-weight: bold;
}
</style>
<slot></slot>
`;
}
}
customElements.define('my-element', MyElement);
Использование:
<my-element>
<p>Этот текст появится в слоте и будет зелёным и жирным</p>
</my-element>
Именованные слоты 🎯
Для более сложных компонентов можно создавать несколько слотов с разными именами. Контент вставляется в слот по имени через атрибут slot.
this.shadowRoot.innerHTML = `
<slot name="header"></slot>
<slot name="content"></slot>
<slot name="footer"></slot>
`;
Использование:
<my-element>
<h1 slot="header">Заголовок</h1>
<p slot="content">Основной контент</p>
<footer slot="footer">Подвал</footer>
</my-element>
Как стилизовать содержимое слотов?
- Используйте псевдокласс
::slotted()внутри Shadow DOM для стилизации элементов, переданных в слот. - Ограничение: внутри
::slotted()можно указать только простые селекторы (например,p,.class), нельзя использовать вложенные селекторы.
Пример:
::slotted(p) {
color: blue;
}
Обработка событий в слотах 🔔
События, происходящие в элементах Light DOM, проходят через слоты и могут быть пойманы в Shadow DOM или на родительском элементе.
Это помогает создавать сложные взаимодействия между внешним контентом и компонентом.
Частые ошибки и советы 💡
- Не забудьте, что если слот не заполнен контентом, то будет показан его fallback (если задан).
- Следите за правильным именованием слотов и атрибутов
slotу элементов. - Используйте слоты, чтобы сделать компоненты максимально гибкими и расширяемыми.
Итоги 🎯
- Слоты позволяют встраивать внешний контент в Shadow DOM
- Поддерживают именование для сложной структуры
- С помощью
::slotted()можно стилизовать внешний контент - События из Light DOM проходят через слоты, что облегчает взаимодействие
Используйте слоты для создания мощных и адаптивных компонентов! 🎭✨