CSS Pseudo模块中::selection伪元素自定义属性的继承机制解析

背景与问题起源

在CSS Pseudo模块的标准化过程中，关于::selection伪元素如何处理自定义属性(CSS变量)的继承问题引发了多次讨论。这个问题源于Chromium浏览器尝试实现高亮继承模型时的三次失败尝试，每次失败都揭示了现有规范与Web开发者实际使用模式之间的不匹配。

三次实现尝试的经验教训

1. 首次尝试失败：当仅从根元素继承自定义属性时，GitHub等网站的选择样式失效，因为这些网站依赖根元素定义的自定义属性。

2. 二次调整失败：改为完全禁止在高亮伪元素上使用自定义属性，仅允许从原始元素继承。这又破坏了开发者社区中广泛传播的最佳实践——通过元素级联继承实现选择样式。

3. 三次尝试失败：发现流行的CSS预处理工具生成的代码依赖在高亮伪元素上定义自定义属性，如::selection { --my-opacity: 1; }这样的模式。

最终解决方案

经过CSS工作组的深入讨论，确定了以下规范方向：

• 明确允许在高亮伪元素上使用自定义属性
• 自定义属性保持从原始元素继承的行为
• 高亮伪元素上定义的自定义属性仅在该规则内有效，不参与高亮继承链

这种设计既保持了向后兼容性，又解决了预处理工具生成代码的兼容问题，同时避免了实现上的过度复杂性。

技术实现考量

从实现角度看，这种方案相对简单高效：

1. 高亮伪元素获取原始元素所有变量的共享副本
2. 添加高亮伪元素自身定义的任何变量
3. 变量解析时优先查找高亮规则定义，其次查找原始元素继承链

这种实现方式避免了需要维护"双重继承"路径带来的性能损耗，也不会导致CSSOM暴露不一致的计算值。

开发者影响与最佳实践

对于Web开发者而言，这意味着：

• 可以继续使用现有的CSS变量继承模式设置选择样式
• 允许在高亮伪元素规则内定义局部使用的CSS变量
• 需要注意自定义属性的继承行为与其他属性不同
• 建议将高亮相关变量统一命名(如-selection-前缀)以避免混淆

这种折中方案虽然使自定义属性的继承行为与其他属性不同，但在当前Web生态下提供了最佳的兼容性和可实现性平衡。