Атрибут is тега <aside>
Описание
Атрибут is позволяет использовать элемент <aside> как пользовательский встроенный элемент (customized built-in element) в сочетании с Web Components API. Этот атрибут указывает имя пользовательского элемента, который расширяет функциональность стандартного тега.
<!-- Объявление пользовательского элемента -->
<script>
class ExpandingAside extends HTMLElement {
constructor() {
super();
// Логика компонента
}
}
customElements.define('expanding-aside', ExpandingAside, { extends: 'aside' });
</script>
<!-- Использование с атрибутом is -->
<aside is="expanding-aside">
<h3>Расширяемая панель</h3>
<p>Кликните для раскрытия дополнительной информации</p>
</aside>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Требования | Необходима регистрация пользовательского элемента через JavaScript |
| Совместимость | Поддерживается не всеми браузерами (требуется полифил) |
| Синтаксис | Значение должно соответствовать имени зарегистрированного элемента |
| Семантика | Сохраняет семантику исходного элемента <aside> |
Практический пример с функциональностью:
<script>
class CollapsibleAside extends HTMLElement {
constructor() {
super();
// Создание тени DOM
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
border: 1px solid #ddd;
padding: 10px;
margin: 10px 0;
}
button {
background: none;
border: none;
cursor: pointer;
font-weight: bold;
}
#content {
display: none;
padding-top: 10px;
}
:host([expanded]) #content {
display: block;
}
</style>
<button id="toggle"><slot name="title">Панель</slot></button>
<div id="content"><slot>Содержимое...</slot></div>
`;
this.shadowRoot.getElementById('toggle').addEventListener('click', () => {
this.toggleAttribute('expanded');
});
}
}
customElements.define('collapsible-aside', CollapsibleAside, { extends: 'aside' });
</script>
<aside is="collapsible-aside" expanded>
<span slot="title">Нажмите чтобы скрыть</span>
<p>Это содержимое можно скрыть или показать.</p>
</aside>
Поддержка браузерами:
| Браузер | Поддержка | Примечания |
|---|---|---|
| Chrome | Да | Полная поддержка |
| Firefox | Нет | Требуется флаг или полифил |
| Safari | Нет | Не поддерживается |
| Edge | Да | На основе Chromium |
Ограничения:
- Не все браузеры поддерживают customized built-in elements
- Требуется полифил для полной кросс-браузерной работы
- Сложнее отлаживать, чем автономные элементы
Рекомендации по использованию:
- Используйте только когда нужно сохранить семантику <aside>
- Для широкой совместимости рассмотрите автономные элементы
- Всегда добавляйте полифил при необходимости
- Документируйте использование пользовательских элементов
Полифил для поддержки во всех браузерах:
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.6.0/webcomponents-bundle.js"></script>
<script>
// Проверка поддержки перед регистрацией
if (!window.customElements.get('expanding-aside')) {
class ExpandingAside extends HTMLElement {
constructor() {
super();
// Логика компонента
}
}
customElements.define('expanding-aside', ExpandingAside, { extends: 'aside' });
}
</script>
<aside is="expanding-aside">
<h3>Полифил включен</h3>
<p>Этот компонент будет работать даже без нативной поддержки.</p>
</aside>
Совет: Для новых проектов рассмотрите использование автономных пользовательских элементов (не наследуемых от стандартных тегов) для лучшей совместимости и простоты разработки.
Лучшие практики:
- Сохраняйте семантику исходного элемента
- Добавляйте ARIA-атрибуты для доступности
- Тестируйте производительность при множестве экземпляров
- Используйте Shadow DOM для изоляции стилей
Примечание: Хотя технология customized built-in elements является частью спецификации Web Components, её поддержка в браузерах остаётся неполной. Всегда проверяйте актуальную информацию о поддержке перед использованием в production-проектах.