Web组件和共享样式

这是那些“我们应该对此做些什么”的问题之一。如您所知，Web组件应该是包含在网站中的小型应用程序。但是，有时需要根据嵌入它们的网站来设置样式。

示例：“注册我们的新闻通讯”组件。该组件将包含一些关键项：

输入框

一个按钮

也许重新捕获

按下按钮后与您的服务对话的方法（通过电子邮件传递）

我们将以Google和YouTube为例。Google的配色方案为蓝色（让我们想象一下），而YouTube的配色方案为红色。该组件将类似于您在其中嵌入页面的组件。Google和YouTube都具有此组件。

当组件需要从Google和YouTube继承样式时，就会出现问题。一些不推荐使用的CSS选择器将对此非常有用，因为Google和YouTube的样式表可以仅为Shadow DOM启用颜色，因此我们不必复制/粘贴样式。从理论上讲，该组件应该对主机的样式一无所知，因为我们希望它从主机（Google和YouTube）继承。

目前，我正在使用Angular 6创建一个Web组件，该组件具有很多样式，因为它具有很多元素。我从宿主站点复制/粘贴样式，Bootstrap，图标等，然后根据对其进行样式设置。因此，例如，如果品牌是Google，则颜色应为红色。

这确实很糟糕，原因如下：

必须同时在Web组件和主机上更新样式

绝不是一个好主意

如果所有样式均按1：1复制，则样式所需的字节数将增加一倍

作为开发人员，我将如何考虑这一点？如何在主机上制作样式，然后将其应用于Web组件（称为继承）？我确定有人在遇到Shadow DOM时遇到了与我完全相同的问题。谢谢阅读。