Designer Shadow DOM

[sfmskywalker]

In order to enable easy re-hosting of the workflow designer component, the component should work within a shadow DOM.

StencilJS supports generating Shadow DOM components, but there are challenges to using this when working with third-party libraries such as Antvis X6 and Monaco Editor.

The challenges are:

• 3rd-party libraries that manipulate the "light" DOM do not see elements in the shadow DOM.
• The TailwindCSS stylesheet is currently applied globally, but should somehow target shadow DOM elements.

Some guidance & possible workarounds:

• https://stenciljs.com/docs/styling#global-styles
• https://github.com/elsa-workflows/elsa-core/issues/2421
• https://github.com/Microsoft/monaco-editor/issues/483
• https://github.com/microsoft/monaco-editor/issues/308#issuecomment-284389162
• https://github.com/Microsoft/monaco-editor/issues/619

[tomy2105]

Encapsulation, from programming perspective is always nice. However, I kind of liked the fact that you can "style" Elsa elements using global CSS (althought I faces troubles when Elsa CSS also styled my own ones :)). When using shadow dom how will you enable "end" application to style Elsa components?

[sfmskywalker]

Yeah good point - we should still be able to customize the look & feel by CSS-targeting the shadow DOM. Which should be possible with the :shadow pseudo element and/or shadow parts.

https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-cat-hat https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/