由消费者自定义本机 Web 组件样式

Question

我构建了一堆 Web 组件，消费者可能会使用这些组件中的一个或多个。

通过向组件缩小的 JS 添加 script 标记，然后在您的代码中使用 Web 组件来使用它们，如下所示：<my-cool-component data="someData" />.

CSS 内置于这些组件中，但是，我需要添加功能以允许消费者自定义颜色主题，我想知道我的方法是否可以改进，或者 如果有更好的方法一起。

现在我已经设置好了，这样当有人使用任何组件时，比如 my-cool-component 并且他们有一个 window.coolComponentOptions 设置如下：

window.coolComponentOptions = {
  PRIMARY_BUTTON_BACKGROUND_COLOR: 'tomato',
  PRIMARY_BUTTON_COLOR: '#fff',
  URL_COLOR: 'tomato',
  FONT: 'Arial',
  SECONDARY_BUTTON_BACKGROUND_COLOR: 'lightblue',
  ... // Obviously this could grow tremendously
}

我在 my-cool-component 内部检查并查看 coolComponentOptions 是否存在，如果存在，我将它们映射到 CSS 变量并在任何组件内部使用它们。

或者，我可以像 <my-cool-component primary-btn-color="tomato" /> 那样在组件本身上制作这些值道具，但这可能会导致消费者拥有一个具有大量属性的元素，并且当他们消费 <other-cool-comp /> 时，他们将需要再次重复这些属性。

我很好奇是否有比我使用 window 变量的方式有任何其他（更好）的选择，或者该方法是否可以改进或完全可以接受？

Answer 1

CSS变量可以全局CSS定义。

和 shadowParts 为您提供更全局的 CSS / shadowDOM 样式。

前 Google Web Components 团队成员 Monica Dinculescu 的解释非常好

https://meowni.ca/posts/part-theme-explainer/

由消费者自定义本机 Web 组件样式

Customizing native web components styling by the consumer

html

javascript

css

web-component