由用户自定义本机Web组件样式

问题描述

我构建了一系列Web组件，消费者可能正在使用其中的一个或多个组件。

将script标记添加到缩写为JS的组件中，然后在代码中使用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变量，是否还有其他(更好的)选择，或者该方法是否可以改进或完全可以接受？

css

css变量可以是全局推荐答案定义。

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

前Google Web组件团队成员Monica Dinculescu解释得很好

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

这篇关于由用户自定义本机Web组件样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！