SSR / declarative shadow DOM support

[luwes]

This is the start of Server Side Rendering exploration for Media Chrome.

Adds support to ~the Media Chrome container and poster image~ all Media Chrome elements for existing shadow DOM. This existing shadow DOM would be rendered server side. ~All Media Chrome elements would need to support this if we want full support.~

~The ssr.html example is currently handwritten HTML, the goal is to have some sort of render function for people to use in Node apps that will do this automatically. Good example of previous art, https://github.com/skatejs/ssr/blob/master/index.js~

~Example now includes a Node "server" or static build server based on https://github.com/matthewp/ocean~ Example now includes a Node "server" or static build server based on Linkedom only

More info about declarative shadow DOM. It's only supported by Chrome so far. https://web.dev/declarative-shadow-dom/

The polyfill does make a difference since it will be executed sooner than the upgrade of the custom elements, especially if the webpage has a lot of HTML to parse.

script[type=module] are deferred by default so they will execute only when all HTML is parsed. See https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6

Without SSR on 3G

With SSR on 3G

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/mux/media-chrome/Dfmq9RYPT39cNbHXxboQobdegmDd
✅ Preview: https://media-chrome-git-fork-luwes-ssr-mux.vercel.app

[luwes]

lets revisit when we like to officially support SSR