如何使用shadow-dom web组件获得一致的聚焦轮廓颜色？

Question

我使用的是web组件，主要是用lit-element和lit-html编写的，它们使用的是Shadow DOM。

一些组件有按钮和其他交互式部分，它们具有默认的焦点轮廓。

在构建应用程序时，我喜欢设置页面范围的规则，将焦点轮廓更改为与页面背景颜色明显不同的颜色。

*:focus {
  outline: 2px solid lime;
}

我原以为这会越过阴影边界进入web组件，类似于color和font-size，但事实并非如此

考虑到outline不会跨越阴影边界-我有哪些选项可以实现一致的聚焦轮廓颜色？

Answer 1

在你的应用中标准化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值)