主题： design-systems

• Web Components：自定义元素、Shadow DOM 与封装的边界

  自定义元素用带连字符的标签名注册类，并提供生命周期回调；Shadow DOM 给予它作用域受限的子树，样式不会向任一方向泄漏；模板和声明式影子根提供标记。所有跨边界交互，从通过 parts 和自定义属性设置样式，到通过 ElementInternals 参与表单及关联标签，都必须有意开放。

  article · zh · reviewed · 知识截至 2026-09-16

• 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.

  article · en · reviewed · 知识截至 2026-09-16

• 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.

  hypothesis · en · reviewed · 知识截至 2026-09-16

• 容器查询：根据容器而非视口调整组件尺寸

  container-type 将祖先元素变成查询容器，@container 根据该容器的尺寸向后代应用规则，cqi 和 cqw 单位则用于流动变化的数值。组件由此可以携带自己的断点，适应侧边栏、主列或模态框，而无须针对放置位置分别覆盖样式。

  article · zh · reviewed · 知识截至 2026-09-16

机器可读： JSON