前提条件
- 我有一个用于重复或关闭功能请求的 searched
- 我已经阅读了 contributing guidelines
提案
将 css 变量选择器从 :root
更新为 :root,:host
动机和背景
我想在 Bootstrap 5.x(当前版本 5.1.3)中使用一个 web 组件。不幸的是,所有定义颜色、字体等的 CSS 变量都没有被拉取,因为 web 组件没有 :root
。我相信 web 组件的 :root
对应物是 :host
(参见 mdn,here)
我还要指出,我完全是从 font awesome "修复"这个方法中借鉴过来的。如果我编辑 bootstrap CSS,将 :root { ... }
更新为 :root,:host { ... }
,这将解决这个问题。
是否可以将此功能与 Bootstrap 一起更新以更好地支持 web 组件?我很乐意提交 PR。
8条答案
按热度按时间ylamdve61#
感谢@engenb报告此问题。
我同意这可能是Bootstrap中与Web Components缺失的功能。我在处理这个主题时遇到了相同的问题,还有一些同事在our fork of Bootstrap中也遇到了这个问题。
目前,我不确定将
:root { ... }
更改为:root, :host { ... }
会产生什么影响。让我们深入研究一下!如果有人已经有任何信息或线索,请在评论中添加它们:)
8hhllhi22#
我在其他代码库中看到过这个,到目前为止还没有遇到任何问题。我想知道我们是否需要为暗黑模式做一些调整,但可能没问题 :)。
sg2wtvxw3#
以下是实际
:root
声明的问题示例:https://jsbin.com/zazedehola/5/edit?html,js,output 由于阴影DOM,折叠效果无法很好地显示。
我们需要在组件内嵌入css的时间:https://jsbin.com/kunonodiro/1/edit?html,js,output。
如果使用
:host
而不是仅使用:root
,可以避免这个问题。falq053o4#
对于任何其他跟进的人,我正在使用Vue3开发我的web组件,并能够通过在最顶层组件中添加以下内容来解决这个问题。如果这并不必要的话就好了!
$x_1^a_0b_1^x$
mklgxw1f5#
我想补充一下,仅仅将
:root
更改为:root,:host
是不够的。虽然这解决了 CSS 变量的问题,但对于body { ... }
(如字体家族)应用的一些样式在 Web 组件中是无法正常工作的。不确定如何解决这个问题。quhf5bfb6#
我第一次测试时对这个问题的理解不够准确,所以和@Lausselloic(感谢)聊了一下以获取更多细节。
如果我的理解是正确的,我们有3个用例:
bootstrap.min.css
文件。因此,Web组件可以访问在:root
中定义的CSS变量,但无法访问.accordion*
类。因此,在渲染方面, accordion 功能出现问题,但带有颜色的div是正常的。bootstrap.min.css
文件。因此,Web组件可以访问在:root
中定义的CSS变量,因为CSS文件已经在主文档中加载,而.accordion*
类之所以能正常工作,是因为在Web组件内部加载了Bootstrap CSS文件。bootstrap.min.css
;这似乎是这个问题的核心所在,对吗?例如,一个用例可能是主文档加载Material或其他内容,而Web组件使用Bootstrap组件和样式。在这种情况下,确实,在:root
中定义的CSS变量无法访问(带有颜色的div在白色背景上仍然是黑色), accordion 功能也无法完全正常工作,因为它还依赖于在:root
中定义的一些CSS变量。这就是为什么我们需要在这个情况下使用:root, :host
,以便这些CSS变量能够被访问。如果你觉得这个答案不对,请告诉我。在等待反馈的同时,我会继续考虑 #37162 和这个最新的例子。
然而,正如@mlandalv所指出的,这并不能解决所有问题。虽然会有所改善,但还不够。不确定有什么合适的修复方法。
mwkjh3gx7#
我的两分钱:如果你使用Bootstrap为你组件样式,标记可以肯定地坐在轻量级DOM中。这就是Lion如何提供白标Web组件,从而允许任何样式策略的方式。
s71maibg8#
在
:host
上定义自定义属性将使Bootstrap在Web组件内工作,但您无法通过这些相同的属性自定义组件。在组件中声明的属性不能从“外部”覆盖。这可能是有意为之,也可能不是,具体取决于您正在创建的组件类型。如果您不希望您的Web组件可定制,那是一件好事。但是,如果您创建一个Web组件以替换Bootstrap JS,也许您希望继承网站自定义属性值。编辑 :我尝试过自定义属性,显然可以从“外部”覆盖组件自定义属性,它们需要设置在自定义元素本身(如果我们不能这样做的话,这将是一个自定义组件的问题)。