我的项目的上游Web组件主题实现为<custom-style>
元素link
我想实现我的文档级覆盖作为JS模块(如,避免硬编码到app index.html
或等效),表面看起来很简单:
import '@vaadin/vaadin-lumo-styles/color.js';
const $template = document.createElement('template');
$template.innerHTML = `
<custom-style>
<style>
html,
:host {
--lumo-primary-color: red;
}
</style>
</custom-style>`;
document.head.appendChild($template.content);
题
文档中使用的一些Web组件也通过import '@vaadin/vaadin-lumo-styles/color.js'
导入原始主题。
我希望我的覆盖总是最后级联(没有!important
黑客)。
多个后来的import '@vaadin/vaadin-lumo-styles/color.js';
调用是否有可能恢复我的CSS自定义属性覆盖级联?
认为:
--lumo-primary-color: hsl(214, 90%, 52%);
--lumo-primary-color: red;
--lumo-primary-color: hsl(214, 90%, 52%);
)?ES6 import a file in multiple place, why the file loads once?似乎暗示也许不是,但我正在努力寻找任何明确陈述<custom-style>
某种方式的文档。
也许https://github.com/Polymer/polymer/blob/v3.2.0/lib/elements/custom-style.js#L80是关键?
毛刺
https://glitch.com/edit/#!/roan-pizza?path=src/index.js似乎证实重复进口似乎不会造成问题,但为什么呢?它纯粹是由于ES6模块加载缓存,还是还有其他东西呢?
在浏览器检查器中编辑拖放<custom-style>
元素肯定会对级联产生影响(颜色根据标签顺序而变化),因此至少确认加载顺序很重要。
提示:全部删除以进行编辑。
<custom-style>
)由#id
=> <custom-style id="id01">
。<custom-style>
编辑=> save(#id)
。--lumo-primary-color
”中)是变量=> var color = red
。<custom-style id="id01">
=> remove_all(#id)
的所有内容。我只希望你能解决你的问题。你比我好,所以我不会写代码。