Observe shadow root on connected callback

[williammartin]

Description

While poking around and learning about catalyst I tried to use dynamic rendering on the shadow DOM for both a parent and a child custom web component. I was able to see the parent attach the child but the contents of the child were not attached to the DOM.

Why tho?

The existing lazyDefine creates a MutationObserver that listens to the entire document, but shadow roots live as a separate isolated node and so when the shadow root of the parent contained child, the import callback held in dynamicElements was not being called.

What's the fix?

We exported a new observe function which will observe for changes on the provided ElementLike. Then in the controller connectedCallback, if there is a shadowRoot, we'll observe it.

CC @keithamus who I paired on this with

[williammartin]

These are unrelated to the main change, just type errors.

[primer-css]

👋 Hello and thanks for pinging us! This issue or PR has been added to our inbox and a Design Infrastructure first responder will review it soon.

• 🎨 If this is a PR that includes a visual change, please make sure to add screenshots in the description or deploy this code to a lab machine with instructions for how to test.
• ⏩ If this is a PR that includes changes to an interaction, please include a video recording in the description.
• ⚠️ If this is urgent, please visit us in #primer on Slack and tag the first responders listed in the channel topic.

[keithamus]

Great work @williammartin! LGTM 😉