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

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>

Start by reviewing the issue's declarative and imperative Shadow DOM example, including the module graph and CSS module imports. No files or tests are named; done would require defining and confirming compatibility requirements for both server-rendered declarative shadow roots and custom elements that attach shadow roots imperatively.