样式化Web组件

这在这里让我有些困惑，所以我在写新内容时就写出来了。 仅仅因为您使用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）。

影根

我知道，没有任何一种全局方法可以穿透该边界，因此，如果要引入样式，则必须将样式引入模板。

在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 { ... }

翻译自: https://css-tricks.com/styling-a-web-component/