feat: Produce Declarative Shadow DOM with Hydrate #4010
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
Add a feature to the hydrate package so the renderToString function produces static html using Declarative Shadow DOMs' tag instead of the current custom solution.
Terminology used:
Declarative Shadow DOM = DSD.
Resources:
https://caniuse.com/declarative-shadow-dom
https://github.com/mfreed7/declarative-shadow-dom
Describe the Use Case
The current hydrate pacakge is good, thanks for that as we all know how hard WebComponents and SSR are, but with the implementation of DSD in Webkit and easy Polyfils, the hydrate script should have an option which produces Declarative Shadow DOM.
Please keep in mind that my internal knowledge of Stencil is limited, I take some assumptions with the benefits this feature could have.
What are the benefits:
- The browser automatically creates a shadow-root fragment from
<template shadowroot="open">. For Firefox, a simple polyfill can be used. - This also means that the WebComponents can be 100% compatible with React/SSR, as React only sees the same tree as the one specified in the template. No hydration warnings anymore.
- No extra css-scoping and de-scoping required. Just place the css as is inside a <style> tag inside the
<template>. renderToStringmay not require the full html anymore, as no mutations to<head>are needed. It would only need the code of the component(s).- Hydration does need not a full re-rendering. The contents of the DSD are still present in the #shadow-root fragment.
- Currently this means that Stencil must hydrate components before any other framework does, otherwise it would cause for example React Hydration Errors as the DOM does not match.
Describe Preferred Solution
- "Stencil Hydrate" should allow to render components using Declarative Shadow DOM
- "Stencil Hydrate"s' hydration logic should work with existing ShadowRoot and Nodes upon initialization to avoid unecessary re-rendering.
- Styles should be usable without the current custom scoping solution.
Additional Information
I dont have any information on how Firefox plans to support DSD, but for cross-framework-compatible SSR i see no way around DSD.
Edit: Firefox DSD implementation is finished: https://bugzilla.mozilla.org/show_bug.cgi?id=1712140