[Declarative Shadow DOM Style Sharing] consider compatibility between declarative and imperative use

[sorvell]

It's common for users to create Shadow DOM imperatively in custom elements. Libraries can then server side render SSR the result into declarative Shadow DOM that later upgrades to a loaded custom element. The solution here should integrate well with both approaches.

Using the module graph for this is a good start, so I want to confirm that the following would work:

<script type="css-module" indentifier="/styles.css">
  :host { display: block; background: green; }
</script>
<div>
  <template shadowrootmode="open" adoptedstylesheets="./styles.css">Hi</template>
</div>

<x-foo></x-foo>
<script type="module">
  import sheet from './styles.css' with { type: 'css' };
  import otherSheet from './load-styles.css' with { type: 'css' };
  customElements.define('x-foo', class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'}).innerHTML = 'hi';
      this.shadowRoot.adoptedStyleSheets.push(sheet, otherSheet);
    }
  });
</script>

<div>
  <template shadowrootmode="open" adoptedstylesheets="./load-styles.css">Hi</template>
</div>

[KurtCattiSchmidt]

Yes, based on our current proposal, this should work. One of the goals of using the module graph is that imperative and declarative should be able to interact like this.

[jpzwarte]

Some questions to the above example:

• So the relative path in the example is relative to what? The current URL? What if you have a SPA and you reload the page on a child route?
• What if you have a hash-based SPA?
• What if you have a custom element that is used on different pages/URLs?
• What if you have a combination of compiled custom elements and build-less CEs and both use the same stylesheet?

Do import maps perhaps mitigate some of these issues by mapping different URLs to the same stylesheet?

Edited: Is it possible to use import maps with this? Since there isn't an actual CSS file that can be downloaded by the browser?