Skip to content

Interaction with declarative shadow DOM #914

@justinfagnani

Description

@justinfagnani

We need to specify how scoped custom element registries interact with declarative shadow DOM.

The fundamental behavior we need is for a declarative shadow root to not use the global registry when it's going to be used with a scoped registry once its host is defined. Then we need the host to be able to assign a scoped registry to a shadow root that's already been created.

This is accomplishable with an attribute that maps to an attachShadow() option to opt-out of the global registry, without yet having a scoped registry to use. In attachShadow() options, we can allow registry to be undefined. In declarative shadow DOM, we can introduce an attribute, like shadowrootregistry:

<template shadowroot="open" shadowrootregistry="">
  <some-scoped-element></some-scoped-element>
</template>

Next, we need to be able to add the ability for a scoped registry to be set on an existing ShadowRoot. Possibly like:

const registry = new CustomElementRegistry();

class extends HTMLElement {
    #internals = null;
    constructor() {
      super();
      this.#internals = this.attachInternals();
      if (this.#internals.shadowRoot) {
        this.#internals.shadowRoot.registry = registry;
      } else {
        this.attachShadow({mode: 'open', registry});
      }
    }
 }

This means we need to clarify whether the registry can change over time, or whether it can only be set on declarative shadow roots that have been opted out of the global registry. A registry changing over time is something that has also come up in #907 (moving shadow roots between documents).

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