POC: Isolated components

[fregante]

Demo for:

• Figure out ergonomics of CSS modules in ShadowDOM components #7670

I just wanted to share the progress on this issue, I think I got it.

This solution:

• supports both import './somethingGlobal.css' and import './Component.module.css'
• ensures no global styles leak (the component can directly import bootstrap for example)
• automatically creates, injects and awaits the CSS file specific to the component in a shadow DOM
• uses React.lazy to load components
• requires no webpack config
• its shadow DOM can be opened/closed at build time, to ensure privacy without compromising testability
• it uses a unique element name to eliminate any conflicts that may arise from using div as the name

Unfixable without iframes:

• if the component dynamically import()s another CSS file, this CSS file is still injected into the main document

Some context and brainstorming also be found on:

• Support for Web Components, Shadow DOM, adoptedStyleSheets webpack-contrib/mini-css-extract-plugin#1092

How to try this PR:

1. visit https://pbx.vercel.app
2. notice red widget appearing in the middle, without any red color leaking out

What's next:

• validate idea by using it on our own components
• include any other improvements mentioned in the original issue

[fregante]

Closing this PR to keep it as a POC. I'll open another PR shortly