聚合物` <custom-style> `：哪一行代码停止向DOM添加同一个自定义样式模板模块的多个导入？

Question

我的项目的上游Web组件主题是作为<custom-style>元素链接实现的

我想将我的文档级覆盖实现为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%);
• me：import original，override --lumo-primary-color: red;
• 后来：可以稍后导入原来的“重置”级联回--lumo-primary-color: hsl(214, 90%, 52%); ）？

ES6在多个位置导入文件，为什么文件加载一次？ 似乎暗示也许不是，但我正在努力寻找任何明确说明<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模块加载缓存，还是还有其他东西呢？

浏览器检查器中的EDIT拖放<custom-style>元素肯定会对级联产生影响（颜色根据标记顺序而变化），因此至少确认加载顺序很重要。

Answer 1

提示：全部删除以进行编辑。

1. 差异标签（ <custom-style> ）by #id => <custom-style id="id01"> 。
2. 将<custom-style> > save(#id)到edit => save(#id) 。
3. 红色（在“ --lumo-primary-color ”中）是变量=> var color = red 。
4. 删除<custom-style id="id01"> => remove_all(#id)所有内容。
5. 添加您需要的新内容=>如上所述。

我只希望你能解决你的问题。 你比我好，所以我不会写代码。