[scoped-custom-element-registry] When used, elements defined globally remain undefined

[tpluscode]

Description

In short, I wanted to use globally defined elements in an element which also uses a scoped registry. In my real scenario, the global elements are Shoelace.

Unfortunately, if I use a global element inside a shadow root with scoped registry, it is not created as expected.

Example

https://lit.dev/playground/#gist=aeaab7d7ae68b4341eee63c47d663337

Steps to reproduce

1. Define my-parent with a scoped custom element registry
2. In its shadow DOM render a my-child element
3. Define my-child in global registry

Expected behavior

my-child should be correctly upgraded

Actual behavior

my-child remains undefined unless it is added to the scoped element registry

Version

"@webcomponents/scoped-custom-element-registry": "^0.0.9",
"@open-wc/scoped-elements": "^3.0.5",

[sorvell]

This is by design as per the current proposal. You'll need to re-define the elements in the registry in which you want to use them. To implement this automatically, you could potentially override window.customElements.define to capture the list of defined elements and ensure those are re-defined on any local registry.

Here is an example.

It's better to give feedback on the proposal or the latest version to request an easier way to do this.

[tpluscode]

Thank you @sorvell for the example. Definitely, there needs to be a simpler way. I will formulate something under that issue