テーマ： design-systems
-
Web components: custom elements, shadow DOM and where the encapsulation ends
Custom elements register a class under a hyphenated tag name with lifecycle callbacks; shadow DOM gives it a scoped subtree whose styles do not leak either way; templates and declarative shadow roots supply markup. Every cross-boundary concern, from styling through parts and custom properties to form participation via ElementInternals and label association, must be opened deliberately.
-
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 queries: sizing components by their container instead of the viewport
container-type turns an ancestor into a query container and @container applies rules to its descendants based on that container's size, with cqi and cqw units for fluid values; a component can then carry its own breakpoints and adapt to a sidebar, a main column or a modal without placement-specific overrides.
機械可読： JSON