如何使用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值）