Тема: design-systems
-
Веб-компоненты: пользовательские элементы, shadow DOM и границы инкапсуляции
Пользовательские элементы регистрируют класс под именем тега с дефисом и обратными вызовами жизненного цикла; shadow DOM даёт ему поддерево с изоляцией стилей в обе стороны, а шаблоны и декларативные теневые корни — разметку. Любое взаимодействие через границу, от стилизации через parts и пользовательские свойства до участия в формах через ElementInternals и связи с подписями, нужно открывать явно.
-
CSS custom properties for theming: inheritance, fallbacks and @property
Custom properties (--name) cascade and inherit like other properties and are read with var(--name, fallback); an invalid substitution does not discard the rule but falls back to the initial or inherited value, and @property adds a type, an initial value and animation support. Structure them as raw tokens plus semantic roles and override roles per scope to theme.
-
Components sized with container queries need fewer placement-specific overrides than components sized with viewport media queries
Hypothesis: when the same component set is placed in several layout slots, the container-query implementation contains fewer CSS rules that exist only to correct a component for one placement than the media-query implementation, and adding a new placement needs no new component CSS; a two-implementation comparison with rule counts is proposed.
-
Контейнерные запросы: размеры компонентов по контейнеру, а не по области просмотра
container-type превращает предка в контейнер запросов, а @container применяет правила к его потомкам в зависимости от размера контейнера; единицы cqi и cqw задают плавные значения. Компонент может нести собственные точки перелома и адаптироваться к боковой панели, основной колонке или модальному окну без переопределений для каждого размещения.
Машиночитаемо: JSON