Build legacy script for use as polyfill that hydrates shadow roots on page

[kevinpschaaf]

Task to build a legacy script for use as polyfill that hydrates shadow roots on page, without needing to import modules and call hydrateShadowRoots in user code.

We may want one or more options on how this would work:

• Use MutationObserver to hydrate shadow roots as they are encountered, for better streaming support (as noted in the mutation-observer.ts implementation, this likely needs to be more sophisticated to avoid hydrating partially-parsed templates
  • To confirm: Does the parser actually yield in the middle of a large template? If so, may need more sophisticated logic around e.g. detecting that the next element after the <template> has opened before hydrating a given template
  • What is the perf impact of using MutationObserver over one-shot DOMContentLoaded?
• Wait until DOMContentLoaded and upgrade all in one shot