Skip to content

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

Open
@sorvell

Description

@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>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions