这在这里让我有些困惑，所以我在写新内容时就写出来了。 仅仅因为您使用Web组件并不意味着它的样式是完全独立的。 您的Web组件中可能包含内容，这些内容通常与网站的其余部分一起设置为样式。 像这样：
在CodePen上查看 Chris Coyier （ @chriscoyier ）的具有全局样式的Pen Web组件（因为没有Shadow DOM） 。
该附加点击处理程序来隔离其自身JavaScript驱动功能。 但是该按钮的样式来自应用于该页面的全局CSS 。
在Web组件内移动模板
但是，假设我们将移至Web组件，因此我们可以.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
在定义影子DOM的地方，您可以使用该标头：
这样， 见笔插槽和样式的Web组件由克里斯Coyier（ @chriscoyier上） CodePen 。 我没有对此进行过多研究，因为我认为这是一个仍在研究中的规范，但最终可能会在这里发挥重要作用。 莫妮卡·丁库列斯库（Monica Dinculescu）在她的文章:: part和:: theme（:: explainer）中对此进行了详细介绍 。 看起来好像是一种进入影子DOM的方法，但只能达到匹配的确切水平，没有更深的层次。 翻译自: https://css-tricks.com/styling-a-web-component/将成为全局样式，而 :: part和:: theme
x-foo::part(some-box) { ... }
/* nope */
x-foo::part(some-box) span { ... }