聚合物` <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. 添加您需要的新內容=>如上所述。

我只希望你能解決你的問題。 你比我好，所以我不會寫代碼。