bootstrap 使用:host选择器以更好地支持Web组件

kupeojn6  于 4个月前  发布在  Bootstrap
关注(0)|答案(8)|浏览(86)

前提条件

提案
将 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。

ylamdve6

ylamdve61#

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

8hhllhi2

8hhllhi22#

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

sg2wtvxw

sg2wtvxw3#

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

falq053o

falq053o4#

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

$x_1^a_0b_1^x$

mklgxw1f

mklgxw1f5#

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

quhf5bfb

quhf5bfb6#

我第一次测试时对这个问题的理解不够准确,所以和@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所指出的,这并不能解决所有问题。虽然会有所改善,但还不够。不确定有什么合适的修复方法。
mwkjh3gx

mwkjh3gx7#

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

s71maibg

s71maibg8#

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

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

相关问题