聚合物“ <custom-style>”：哪一行代码停止将相同的自定义样式模板模块的多个导入追加到DOM？

Question

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

我想将我的文档级别替代实现为JS模块（例如，避免将其硬编码到应用程序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'。

我希望我的替代项总是最后级联（没有!importanthack）。

以后是否有多个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在多个位置导入文件，为什么文件一次加载？似乎没有暗示，但是我正在努力寻找任何明确说明某事的文档<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>浏览器检查器中的EDIT拖放元素肯定会对级联产生影响（颜色根据标记顺序更改），因此至少可以确定加载顺序很重要。

Answer 1

提示：删除所有内容进行编辑。

1. （的<custom-style>）差异标签#id=> <custom-style id="id01">。
2. 保存<custom-style>到编辑=> save(#id).
3. 红色（在“ --lumo-primary-color”中）是一个变量 => var color = red。
4. 删除 a <custom-style id="id01">=>的所有内容remove_all(#id)。
5. 添加您需要的新内容 => 正如上面所做的那样。

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