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.
New Feature Proposal
For more information, see the
CONTRIBUTING
guide.Description
With
1.4.0
we've introduced thepiral-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:
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.