webcomponents / template-shadowroot Goto Github PK

This spec has progress and is shipping in Chrome. We should move it into the webcomponents/polyfills repo and figure out a bundle/loader strategy.

A querySelector based implementation (rather than a manual walk) will be smaller and potentially faster.

A mutation observer option would allow a polyfill option rather than just a ponyfill, so non-native browsers would get native-like behavior without the need to call a function, though the timing would be different (mutation observer timing, so one microtask tick)

Hi, it looks like there are cases where DOM nodes being added by extensions cause the polyfill to choke. I'm my specific case it's using Windows 11, Firefox, Grammarly desktop, and a website built using a common pattern of hiding the body element until the polyfill has finished executing. I imagine this should probably be handled since website visitors would have no understanding as to why they just see an empty page. I can take a look at doing a PR if that's the direction the maintainers want to take.

When using this library in a server's development mode, the sourcemaps point to files that were not distributed with the package.

For example: https://unpkg.com/@webcomponents/[email protected]/template-shadowroot.js.map points to https://unpkg.com/@webcomponents/[email protected]/src/template-shadowroot.ts which does not exist.

See https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md

Hi there, I just noticed that when I run Lighthouse with this polyfill, in Chromium browsers these lines are flagged as a deprecated API and severely reduce the Best Practices result. It seems from here that this needs to be updated to use parseHTMLUnsafe() instead? I can put in a PR for this if that's acceptable

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

Calling hasNativeDeclarativeShadowRoots returns false in Chrome, because you can't set innerHTML to attach a shadow DOM as per this: https://web.dev/declarative-shadow-dom/#parser-only

Need to use a DOMParser. Going to test this myself and then will send a PR.