design

Селекторы [data-state]: стили без десятка классов

Селекторы [data-state]: стили без десятка классов

Атрибуты data-state="open" позволяют стилизовать [data-state=open] без классов .is-open — удобно для headless компонентов и тестов.

Не дублируйте данные только в data-атрибутах для SEO — видимый текст остаётся в DOM.

- [Attribute selectors — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) — [attr=value] синтаксис.

- [data-* attributes — MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) — Кастомные data.

---

## Специфичность

Селектор [data-state=open] сравним с классом — держите один источник правды в JS.

beforetoggle: хук жизненного цикла popover

Аналитика до открытия панели.

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.