Re: [WICG/webcomponents] [scoped-registries] Interaction with declarative shadow DOM (#914)

> > Given that element definitions require script, I'm not sure there's much to be gained by making registries declarative at this point. Same with registry names. Since you need script already, you can use script to associate registries and shadow roots. When we get to declarative custom elements that may change.
> 
> The issue is of the order. In the case of a partial hydration, is it true that all element definitions come in top-down order in all use cases? As in, is it really okay that all ancestor custom elements need to be upgraded in order for any descendant custom element to be upgraded?

Yeah, the pattern of:

```js
// my-component.js
import Component1 from "component1";
import Component2 from "component2";

const registry = new CustomElementRegistry();

registry.define("component-1", Component1);
registry.define("component-2", Component2);

export default class MyComponent extends HTMLElement {
  #shadowRoot = this.attachShadow({ mode: 'closed', registry });
  
  // ...
}
```

Means that upgrading will always happen top-down, even if we have something like:

```js
const registry = new CustomElementRegistry();

import("component-1").then(mod => registry.define("component-1", mod.default));
import("component-1").then(mod => registry.define("component-2", mod.default));

export default class MyComponent extends HTMLElement {
  #shadowRoot = this.attachShadow({ mode: "closed", registry });
  
  // ..
}
```

Upgrading the scoped components is still contingent on when `my-component.js` finishes fetching and evaluating. If the scoped components managed to fetch earlier (e.g. by `<link rel="preloadmodule"`), they still can't upgrade those within `<template shadowroot="..." customelementregistry="">` as they don't know what their name will be.

Ideally components could opt into as much eager upgrading of subcomponents as they want without being blocked on `my-component.js` being fetched and evaluated. By doing it in HTML, the browser can trivially upgrade components immediately as it receives them from fetching, regardless of order.

We can't even really hack it properly using inline scripts either, because if want to associate a registry we have to use `.attachShadow`, which breaks how DSD works (e.g. components need to become aware of this hack, and we'd need to resort to `if (this.shadowRoot)` checking again rather than the clear and return `.attachShadow` behaviour).

As such, it really needs to be declared in the HTML somehow, whether by my suggestion of `<registry>` or even just attributes on the elements themselves, e.g. `<my-element customelementdefinition="path/to/my-element.js"></my-element>`, or something different entirely. The key point is that as soon as custom elements definitions arrive, we ideally want to be able to upgrade all such components, inside scoped shadow roots, or not.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/914#issuecomment-799851148