css – Web组件和共享样式

2023年3月28日 230次阅读

这是“我们应该怎么做”这一问题之一.如您所知,Web组件应该是小型的,包含网站应用程序.但是,有时这些需要根据它们嵌入的网站进行样式设置.

示例：“注册我们的简报” – 组件.这个组件有几个关键项：

>输入框
>一个按钮
>也许重新开始
>按下按钮后与您的服务对话的方法(传入电子邮件)

我们将以Google和YouTube为例.谷歌的配色方案是蓝色的(让我们想象一下),YouTube的配色方案是红色的.该组件将类似于< newsletter-signup>< / newsletter-signup>在您嵌入它的页面上.Google和YouTube都有这个.

当组件需要从Google和YouTube继承样式时,问题就出现了. A few deprecated CSS selectors对此非常有用,因为Google和YouTube的样式表可以简单地为Shadow DOM启用颜色,因此我们不必复制/粘贴样式.理论上,组件应该不知道主机中的样式,因为我们希望它从主机(Google和YouTube)继承.

目前,我正在使用Angular 6创建一个Web组件,它具有很多样式,因为它有很多元素.我是从主机网站复制/粘贴样式,引导程序,图标等,然后根据< newsletter-signup brand =“google”>< / newsletter-signup>设置它们的样式.因此,如果该品牌是Google,则颜色应为红色.

这真的很糟糕,原因如下：

>必须在Web组件和主机上更新样式
>重复的代码永远不是一个好主意
>如果以1：1复制所有样式,则样式所需的字节数将加倍

作为开发人员,我如何考虑这一点？如何在主机上创建样式,然后将它们应用到我的Web组件上(称之为继承)？我确定有人遇到与我遇到的Shadow DOM完全相同的问题.谢谢阅读.

最佳答案 我意识到你不想为你的通用组件(选择器)编写相同的规则

即你想要像你的公共选择器放置样式.

你可以做的事情来处理这个：

1.创建自己的逻辑css框架

在全局css中编写最常用的CSS规则.例如,如果您已经集成了引导程序并且想要覆盖引导程序,那么您将在app.css中编写最常见的覆盖,这将覆盖引导程序.

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

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

>发送规则作为输入

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

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

component.ts

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

您可以通过创建公共类来在各种组件的输入中发送规则
如您所知,嵌入此组件的位置.

>从通用组件扩展此组件

如果你太关心css,你可以从一个公共组件扩展你的组件,根据需要为你提供css逻辑.

export class NewsLetterComponent extends CSSComponent implements OnInit
  {


  }

CSS-component.ts

在这个组件中可以根据主机,当前路由器链接和逻辑顺序定义css
其他多个if else条件.
您可以通过切换案例条件来定义规则,并将这些规则绑定到您已扩展的组件.

点赞