Customizing native web components styling by the consumer(由用户自定义本机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组件样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:由用户自定义本机Web组件样式


- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- Fetch API 如何获取响应体? 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- 失败的 Canvas 360 jquery 插件 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- addEventListener 在 IE 11 中不起作用 2022-01-01