Web组件和共享样式

Question

这是那些“我们应该对此做些什么”的问题之一。如您所知，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，则颜色应为红色。

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

1. 必须同时在Web组件和主机上更新样式
2. 复制代码绝不是一个好主意
3. 如果所有样式均按1：1复制，则样式所需的字节数将增加一倍

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

Answer 1

我意识到你不想为你的公共组件（选择器）编写相同类型的规则

即您想要将样式设置为放置公共选择器的位置。

您可以采取以下措施来处理此问题：

1.创建你自己的逻辑CSS框架

在全局 css 中编写最常用的 CSS 规则。例如，如果您集成了 bootstrap 并且想要覆盖 bootstrap，则将在覆盖 bootstrap 的 app.css 中编写最常用的覆盖。

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles/app.scss"
        ],

这个 app.scss 应该以您可以覆盖的方式编写。

2. 发送规则作为输入

发送自定义规则 Obj 并在要覆盖的元素中使用。

<newsletter [input]="customRulesObj"></newsletter>

组件.ts

customRulesObj = new CustomRulesClass();
customRulesObj.color = 'red';

您可以通过创建一个公共类来在各个组件的输入中发送规则，因为您知道要嵌入该组件的位置。

3. 从通用组件扩展此组件

如果您太关心 css，您可以从通用组件扩展您的组件，该组件根据需要为您提供 css 逻辑。

export class NewsLetterComponent extends CSSComponent implements OnInit
  {


  }

CSS-组件.ts

在此组件中，可以根据主机、当前路由器链接和其他多个 if else 条件逻辑地定义 css。您可以通过 switch case 条件定义规则并将这些规则绑定到您扩展的组件。