感谢@engenb报告此问题。
我同意这可能是Bootstrap中与Web Components缺失的功能。我在处理这个主题时遇到了相同的问题，还有一些同事在our fork of Bootstrap中也遇到了这个问题。
目前，我不确定将:root { ... }更改为:root, :host { ... }会产生什么影响。让我们深入研究一下！
如果有人已经有任何信息或线索，请在评论中添加它们：)

我在其他代码库中看到过这个，到目前为止还没有遇到任何问题。我想知道我们是否需要为暗黑模式做一些调整，但可能没问题 :)。

以下是实际:root声明的问题示例：
https://jsbin.com/zazedehola/5/edit?html,js,output 由于阴影DOM,折叠效果无法很好地显示。
我们需要在组件内嵌入css的时间：https://jsbin.com/kunonodiro/1/edit?html,js,output。
如果使用:host而不是仅使用:root,可以避免这个问题。

对于任何其他跟进的人，我正在使用Vue3开发我的web组件，并能够通过在最顶层组件中添加以下内容来解决这个问题。如果这并不必要的话就好了！

$x_1^a_0b_1^x$

我想补充一下，仅仅将 :root 更改为 :root,:host 是不够的。虽然这解决了 CSS 变量的问题，但对于 body { ... }(如字体家族)应用的一些样式在 Web 组件中是无法正常工作的。不确定如何解决这个问题。

我第一次测试时对这个问题的理解不够准确，所以和@Lausselloic(感谢)聊了一下以获取更多细节。
如果我的理解是正确的，我们有3个用例：

1. The first one 在主文档中加载 bootstrap.min.css 文件。因此，Web组件可以访问在 :root 中定义的CSS变量，但无法访问 .accordion* 类。因此，在渲染方面， accordion 功能出现问题，但带有颜色的div是正常的。
2. The second one 在主文档和Web组件中都加载了 bootstrap.min.css 文件。因此，Web组件可以访问在 :root 中定义的CSS变量，因为CSS文件已经在主文档中加载，而 .accordion* 类之所以能正常工作，是因为在Web组件内部加载了Bootstrap CSS文件。
3. 最后，the third one 只在Web组件中加载了 bootstrap.min.css;这似乎是这个问题的核心所在，对吗？例如，一个用例可能是主文档加载Material或其他内容，而Web组件使用Bootstrap组件和样式。在这种情况下，确实，在 :root 中定义的CSS变量无法访问(带有颜色的div在白色背景上仍然是黑色), accordion 功能也无法完全正常工作，因为它还依赖于在 :root 中定义的一些CSS变量。这就是为什么我们需要在这个情况下使用 :root, :host,以便这些CSS变量能够被访问。
   如果你觉得这个答案不对，请告诉我。在等待反馈的同时，我会继续考虑 #37162 和这个最新的例子。
   然而，正如@mlandalv所指出的，这并不能解决所有问题。虽然会有所改善，但还不够。不确定有什么合适的修复方法。

我的两分钱：如果你使用Bootstrap为你组件样式，标记可以肯定地坐在轻量级DOM中。这就是Lion如何提供白标Web组件，从而允许任何样式策略的方式。

在:host上定义自定义属性将使Bootstrap在Web组件内工作，但您无法通过这些相同的属性自定义组件。在组件中声明的属性不能从“外部”覆盖。这可能是有意为之，也可能不是，具体取决于您正在创建的组件类型。如果您不希望您的Web组件可定制，那是一件好事。但是，如果您创建一个Web组件以替换Bootstrap JS,也许您希望继承网站自定义属性值。

编辑 :我尝试过自定义属性，显然可以从“外部”覆盖组件自定义属性，它们需要设置在自定义元素本身(如果我们不能这样做的话，这将是一个自定义组件的问题)。