如何使用 shadow-dom Web 组件实现一致的焦点轮廓颜色?
How can I achieve a consistent focus outline color with shadow-dom web components?
我正在使用网络组件,主要是用 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 值)
我正在使用网络组件,主要是用 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 值)