javascript - 如何使用 shadow-dom 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 值)

关于javascript - 如何使用 shadow-dom web 组件实现一致的焦点轮廓颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55739721/