这是那些“我们应该对此做些什么”的问题之一。如您所知，Web组件应该是包含在网站中的小型应用程序。但是，有时需要根据嵌入它们的网站来设置样式。
示例：“注册我们的新闻通讯”组件。该组件将包含一些关键项：
我们将以Google和YouTube为例。Google的配色方案为蓝色（让我们想象一下），而YouTube的配色方案为红色。该组件将类似于<newsletter-signup></newsletter-signup>您在其中嵌入页面的组件。Google和YouTube都具有此组件。
当组件需要从Google和YouTube继承样式时，就会出现问题。一些不推荐使用的CSS选择器将对此非常有用，因为Google和YouTube的样式表可以仅为Shadow DOM启用颜色，因此我们不必复制/粘贴样式。从理论上讲，该组件应该对主机的样式一无所知，因为我们希望它从主机（Google和YouTube）继承。
目前，我正在使用Angular 6创建一个Web组件，该组件具有很多样式，因为它具有很多元素。我从宿主站点复制/粘贴样式，Bootstrap，图标等，然后根据对其进行样式设置<newsletter-signup brand="google"></newsletter-signup>。因此，例如，如果品牌是Google，则颜色应为红色。
这确实很糟糕，原因如下：
作为开发人员，我将如何考虑这一点？如何在主机上制作样式，然后将其应用于Web组件（称为继承）？我确定有人在遇到Shadow DOM时遇到了与我完全相同的问题。谢谢阅读。
考虑一下,我使用Shadow DOM隐藏其内部div-soup和布局的元素很少.
即使是艰难的,它们也是不同的,它们共享相同的CSS样式表,因为它们使用的是相同的元素集,这些元素应该以一致的方式进行样式化.例如,这可以是CSS框架(引导程序).
问题是这个样式表非常大.
在许多Shadow Roots(在SD V1中)之间分享如此大样式表的最有效方法是什么？