Optional Shadow DOM Isolation

[FlorianRappl]

New Feature Proposal

For more information, see the CONTRIBUTING guide.

Description

With 1.4.0 we've introduced the piral-component isolation, which - among some consistency - adds not much so far. However, one of the options we get with this web component is to enable shadow DOM - either as an opt-in from the respective component or by default from the shell.

Background

I've written an article earlier this year about CSS in MF, which also lists shadow DOM as a potential solution (granted, with its own problems) for avoiding styling conflicts.

By putting components from MFs directly into the shadow DOM we are able to avoid these conflicts in the first place.

Discussion

What should be all done by the orchestrator? I think at least:

• Make the shadow root the container for rendering (e.g., for React as portal, or for other frameworks as host)
• Move over the style sheet(s) from the MF into the shadow tree

Furthermore, it might be interesting to move the stylesheet(s) of the app shell into the shadow tree as this is the part we'd still want as a basis. All other styles (from any other MF) should not be included.

This brings up a question: What if we use a shared library that comes with a stylesheet? With the steps above we cannot know (and therefore act) and use it. The isolated component would need to bring over the styles.

[FlorianRappl]

This is deferred until Piral v2. This way its consistent from the get-go instead of something half-baked now that potentially breaks later.