Polymer `<custom-style>`: which line of code stops appending to DOM multiple imports of the same custom-style template module?

Question

My project's upstream web components theme is implemented as <custom-style> elements link

I want to implement my document level overrides as a JS module (as in, avoid hardcoding into app index.html or equivalent), which on surface looks simple:

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);

QUESTION

Some web components used in the document also import original theme via import '@vaadin/vaadin-lumo-styles/color.js' .

I want my overrides to always cascade last (without !important hacks).

Do multiple later import '@vaadin/vaadin-lumo-styles/color.js'; calls have any potential to revert my CSS custom property overrides cascade?

Think:

• original: --lumo-primary-color: hsl(214, 90%, 52%);
• me: import original, override --lumo-primary-color: red;
• later: can a later import of original "reset" cascade back to --lumo-primary-color: hsl(214, 90%, 52%); )?

ES6 import a file in multiple place, why the file loads once? seems to imply maybe not, but I'm struggling finding any documentation that explicitly states something one way or another about <custom-style> .

Perhaps https://github.com/Polymer/polymer/blob/v3.2.0/lib/elements/custom-style.js#L80 is the key?

GLITCH

https://glitch.com/edit/#!/roan-pizza?path=src/index.js seems to confirm repeated imports don't seem to cause a problem, but why? Is it purely due to ES6 module load caching, or is there something else to it?

EDIT drag-n-dropping <custom-style> elements around in browser inspector definitely has an effect on the cascade (colors change based on tag order), so at least loading order is confirmed to matter.

Answer 1

Tips: remove all for edit.

1. difference tags (of <custom-style> ) by #id => <custom-style id="id01"> .
2. save <custom-style> to edit => save(#id) .
3. red (in " --lumo-primary-color ") is a variable => var color = red .
4. remove all content of a <custom-style id="id01"> => remove_all(#id) .
5. add a new content you need => as you did above.

I just hope that you will solve your problem. You are better than me so I will not write code.