我正在使用web组件,大多数是用lit-element
和lit-html
编写的,他们使用的是Shadow DOM。
某些组件具有按钮和其他具有默认焦点轮廓的交互式部件。
当我构建一个应用程序时,我想设置一个页面范围的规则,将焦点轮廓更改为从页面的背景颜色中清晰突出的颜色。
*:focus {
outline: 2px solid lime;
}
我期待这个流过阴影边界到网络组件,类似于color
和font-size
,但它没有
考虑到outline
没有越过阴影边界 - 我有什么选择来实现我一致的焦点轮廓颜色?
--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值)