标准化应用中的 CSS 变量
我使用的是Web组件,主要是用lit-element
和lit-html
编写的,它们使用Shadow DOM。
某些组件具有具有默认焦点轮廓的按钮和其他交互部件。
当我构建应用程序时,我喜欢设置一个页面范围的规则,将焦点轮廓更改为从页面背景颜色中明显突出的颜色。
*:focus {
outline: 2px solid lime;
}
我期望它越过阴影边界流入 Web 组件,类似于 color
和 font-size
,但它没有
考虑到outline
不会跨越阴影边界,我有哪些选项可以实现一致的焦点轮廓颜色?
标准化应用中的 CSS 变量--focus-outline
应用程序级:
* {
--focus-outline: 2px solid lime;
}
*:focus {
outline: var(--focus-outline);
}
组件用法示例:
*:focus {
outline: var(--focus-outline, 2px solid #0af);
}
必须重构每个组件才能接受此变量
每个组件都必须像2px solid #0af
一样定义自己的回退(不幸的是,目前还没有任何标准化的default-focus-outline
CSS 值(