本文介绍了由用户自定义本机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组件样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-02 23:49