这在这里让我有些困惑,所以我在写新内容时就写出来了。 仅仅因为您使用Web组件并不意味着它的样式是完全独立的。 您的Web组件中可能包含内容,这些内容通常与网站的其余部分一起设置为样式。 像这样:
在CodePen上查看 Chris Coyier ( @chriscoyier )的具有全局样式的Pen Web组件(因为没有Shadow DOM) 。
该<whats-up>
元素通过在其内部的<button>
附加点击处理程序来隔离其自身JavaScript驱动功能。 但是该按钮的样式来自应用于该页面的全局CSS 。
在Web组件内移动模板
但是,假设我们将<button>
移至Web组件,因此我们可以<whats-up>
使用<whats-up>
。 我们可以通过.innerHTML
'自定义元素来做到这一点:
在CodePen上查看 Chris Coyier ( @chriscoyier )的具有全局样式的Pen Web组件(因为没有Shadow DOM) 。
同样,完全由全局CSS设置样式。 凉。 这可能是理想的。 这也可能不是理想的。 也许您正在寻找Web组件来为您隔离样式。
Shadow DOMing模板
Web组件可以通过Shadow DOM隔离样式(并抽象化HTML实现)。 这是相同的组件,而是使用Shadow DOM:
请参阅CodePen上Chris Coyier ( @chriscoyier ) 撰写的 具有本地样式的Pen Web组件 。
请注意,该功能仍然有效(尽管我们必须通过shadowRoot
来querySelector
),但是我们完全失去了全局样式 。 阴影DOM边界(阴影根)可防止样式传入或传出(类似于iframe)。
![](https://i-blog.csdnimg.cn/blog_migrate/a85cc22d3b4ee2e7e3df3ffd2b8a10a9.png)
我知道,没有任何一种全局方法可以穿透该边界,因此,如果要引入样式,则必须将样式引入模板。
在Web组件内移动样式(内联)
请参阅CodePen上Chris Coyier ( @chriscoyier ) 撰写的 具有本地样式的Pen Web组件 。
如果您既想使用Shadow DOM,又想使用全局样式,那将是非常令人讨厌的事情。 有趣的是,有一个Shadow DOM“模式”可以打开和关闭,以允许或禁止JavaScript进出,而CSS则不允许。
如果是这样,您可能需要@import
可以引入的所有全局样式表,以引入这些全局样式,并希望将它们缓存起来,并且浏览器对此很聪明,不会对性能造成重大影响。
链接到外部样式
我将使用CodePen到CSS功能的直接链接将样式从Pen本身导入到Web组件中:
请参阅CodePen上Chris Coyier ( @chriscoyier ) 撰写的 具有本地样式的Pen Web组件 。
显然,尽管如此,仍然无法避免某种形式的Flash-Un-unstyled-Component,因此建议使用内联样式,直到可以为止。 (好吧, 看::part
)。
自定义属性通过影子DOM
要知道的另一件事是CSS自定义属性会穿透Shadow DOM! 是的,他们做到了。 您可以在CSS中选择Web组件,然后在其中进行设置:
见笔与自定义属性Web组件由克里斯Coyier( @chriscoyier上) CodePen 。
您通过广告位指向HTML可以全局设置样式
因此,如果您喜欢:
<my-module>
<h2 slot="header">My Module</h2>
</my-module>
在定义影子DOM的地方,您可以使用该标头:
<div class="module">
<slot name="header"></slot>
</div>
这样, <h2>
将成为全局样式,而<div class="module">
则不是。
见笔插槽和样式的Web组件由克里斯Coyier( @chriscoyier上) CodePen 。
:: part和:: theme
我没有对此进行过多研究,因为我认为这是一个仍在研究中的规范,但最终可能会在这里发挥重要作用。 莫妮卡·丁库列斯库(Monica Dinculescu)在她的文章:: part和:: theme(:: explainer)中对此进行了详细介绍 。
看起来好像是一种进入影子DOM的方法,但只能达到匹配的确切水平,没有更深的层次。
<h4><x-foo>
#shadow-root
<div part="some-box"><span>...</span></div>
<input part="some-input">
<div>...</div> /* not styleable
</x-foo></h4>
x-foo::part(some-box) { ... }
/* nope */
x-foo::part(some-box) span { ... }