Атрибут part тега <aside>
Описание
Атрибут part позволяет стилизовать отдельные части элемента <aside> через CSS, когда элемент находится внутри Shadow DOM. Это часть спецификации CSS Shadow Parts.
Пример использования:
<!-- Компонент с Shadow DOM -->
<script>
class CustomAside extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>
aside {
border: 1px solid #ddd;
padding: 1rem;
}
</style>
<aside part="container">
<h3 part="header"><slot name="header"></slot></h3>
<div part="content"><slot></slot></div>
</aside>
`;
}
}
customElements.define('custom-aside', CustomAside);
</script>
<!-- Использование компонента -->
<custom-aside>
<span slot="header">Заголовок панели</span>
Основное содержимое боковой панели
</custom-aside>
<!-- Стилизация через part -->
<style>
custom-aside::part(header) {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
custom-aside::part(content) {
font-size: 0.9rem;
line-height: 1.5;
}
</style>
Ключевые особенности:
| Характеристика | Описание |
|---|---|
| Назначение | Позволяет стилизовать элементы внутри Shadow DOM |
| Синтаксис CSS | ::part(имя-части) |
| Множественные части | Можно указать несколько имен через пробел: part="header content" |
| Каскадирование | Стили применяются только к явно указанным частям |
Практическое применение:
<!-- Компонент аккордеона -->
<script>
class AccordionAside extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `
<style>
.accordion { border: 1px solid #eee; }
.header {
padding: 1rem;
cursor: pointer;
background: #f5f5f5;
}
.content {
padding: 0 1rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
</style>
<aside class="accordion">
<div part="header" class="header">
<slot name="header">Заголовок</slot>
</div>
<div part="content" class="content">
<slot>Содержимое...</slot>
</div>
</aside>
`;
shadow.querySelector('.header').addEventListener('click', () => {
const content = shadow.querySelector('.content');
content.style.maxHeight = content.style.maxHeight ? '' : '500px';
});
}
}
customElements.define('accordion-aside', AccordionAside);
</script>
<!-- Стилизация аккордеона -->
<style>
accordion-aside::part(header) {
background: linear-gradient(#3498db, #2980b9);
color: white;
font-weight: bold;
}
accordion-aside::part(content) {
background: #f9f9f9;
transition: max-height 0.5s ease;
}
</style>
<!-- Использование компонента -->
<accordion-aside>
<span slot="header">Важная информация</span>
<p>Это содержимое можно скрывать и показывать.</p>
</accordion-aside>
Ограничения:
- Не поддерживается в Internet Explorer
- Стилизация ограничена только указанными частями
- Нельзя стилизовать внутренние элементы частей
Сравнение с другими методами:
| Метод | Преимущества | Недостатки |
|---|---|---|
part |
Контролируемая стилизация извне Shadow DOM | Ограниченная гибкость |
| CSS-переменные | Гибкость, наследование | Может нарушать инкапсуляцию |
::slotted |
Стилизация содержимого слотов | Ограниченная специфичность |
Рекомендации:
- Используйте для компонентов, требующих кастомизации
- Документируйте доступные части компонента
- Сочетайте с CSS-переменными для большей гибкости
- Предоставляйте значения по умолчанию
Примечание: Атрибут part является частью спецификации CSS Shadow Parts и поддерживается всеми современными браузерами, кроме Internet Explorer. Для сложных компонентов рассмотрите комбинацию с другими методами стилизации Shadow DOM.