Javascript 如何使用阴影dom web组件实现一致的焦点轮廓颜色？

我使用的是web组件，大多数是用

lit元素

和

lit html

编写的，它们使用的是影子DOM

某些组件具有按钮和其他具有默认焦点轮廓的交互部件

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

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

我原以为这会通过阴影边界流到web组件中，类似于

color

和

font size

，但事实并非如此

考虑到

outline

不会跨越阴影边界-我需要哪些选项才能实现一致的焦点轮廓颜色？

在应用程序中标准化CSS变量

--焦点轮廓

应用程序级别：

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

*:focus {
  outline: var(--focus-outline);
}

组件使用示例：

*:focus {
  outline: var(--focus-outline, 2px solid #0af);
}

必须重构每个组件才能接受此变量

---

每个组件都必须定义自己的回退，如

2px solid#0af

（不幸的是，目前还没有任何标准化的

默认焦点轮廓

css值）

在web组件中添加css代码您可以在实际元素中添加使用css属性定义的轮廓，如

outline:var（--my outline）

只需在全局级别定义css属性，如

body{--my outline:2px solid lime；}

@AlanDávalos:是的，这就是解决方案，但不幸的是，这需要每个组件实现”--我的大纲，这将使共享和使用开源组件变得困难，除非每个人都同意使用相同的标准化变量名。。。我建议--“聚焦提纲”这不是一个很好的解决方案，但它是目前最好的解决方案。。在未来，ShadowPartsAPI可能会为这一困惑提供更好的答案，我们如何在组件级别做到这一点？（angular/ionic中的组件）我只想为所有HTML元素设置outline:none。@赫曼的想法是我们在网页上设置css变量

--focus outline

，然后每个web组件通过

outline:var（--focus outline）接受变量-可以设置网页
--焦点大纲：无如果这是您想要的焦点行为