Autoloader does not monitor open shadow roots for new components

[patrick-mcdougle]

Describe the bug

The shoelace autoloader does a great job of monitoring the DOM and loading new components as the are added to the DOM, even when added dynamically. However the autoloader doesn't do as well when shoelace components are added to shadowRoots of other custom components.

When crawling through the DOM (and the subsequent mutations) we should check the new elements for shadowRoots and observe the shadowRoots for shoelace components too.

To Reproduce

Steps to reproduce the behavior:

1. Use the shoelace autoloader
2. Add a shoelace component as part of a shadowRoot
3. Notice that the component is not loaded

Demo

In this codepen there are three shoelace buttons.

The button on the left is in the light DOM of a custom web component. When the button is clicked a shadowRoot is attached to the custom component which renders a shoelace badge. The sl-badge component never loads.

The button in the middle is a custom component which manipulates its children when the button is clicked. The sl-badge DOES load.

The button on the right is replaced with a sl-badge (not in a shadowRoot) when clicked. The sl-badge DOES load.

The pen also has a refresh link so you can easily reset the state and try the buttons in different orders.

Browser / OS

• OS: Mac
• Browser: Chrome
• Browser version: 130

Additional information

If watching for updates in shadowRoots are not possible, perhaps exposing a function on the autoloader to "hint" that a component should be loaded might be a reasonable compromise, so authors of custom web components can request the loading of a shoelace component from within their components.

[claviska]

This is by design. There is a discover() method you can use if you're building custom elements that absoultely need the autoloader, but 99% of the time you should manually import components in those situations.

[patrick-mcdougle]

I guess we can wait for MutationObserver to have a flag to monitor open shadowTrees then. whatwg/dom#1287 (comment)

[patrick-mcdougle]

Would you consider an option added to the discover which would also call observe on the MutationObserver with that shadowRoot? It'd be swell if you didn't have to call discover on ever render of a Lit component to check if you used a new shoelace component (and it'd be swell to not have to import them).

[LeaVerou]

Yeah, without that flag (or something like :has-shadow)we'd need to check every single element for a shadow root, which is going to be prohibitively expensive...

[claviska]

It'd be swell if you didn't have to call discover on ever render of a Lit component to check if you used a new shoelace component (and it'd be swell to not have to import them).

It sounds like you're building an app with web components as opposed to a library, which is probably why this feels more difficult. Have you considered creating a base class and adding the autoloader's discovery method there so you don't have to repeat it for every component?

I agree with @LeaVerou that it will be expensive, and with scoped custom element registries on the horizon, there may be future considerations we need to account for that aren't clear yet.