elsa-workflows / elsa-workflows/elsa-studio
Add Shadow DOM support to Elsa Studio
- Dominant language
- C#
- Stars
- 301
- Forks
- 181
- Avg merge
- 17h 12m
- Merged PRs (30d)
- 42
Description
It would be great if Elsa Studio supported rendering into a **Shadow DOM** root to enable full encapsulation of styles and markup. This is especially useful when embedding Elsa Studio as a **custom element** in host applications that have their own styling, potentially conflicting with Elsa Studio’s styles.
### Benefits
* Prevents style bleed from the host application into Elsa Studio and vice versa
* Enables safer embedding in diverse frontend environments (e.g., Angular, Vue, React)
* Aligns with modern Web Components best practices
### Techniques
A common approach is to define a custom element manually and attach a Shadow DOM root:
```js
class ElsaStudioElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '_content/MudBlazor/MudBlazor.min.css'; // Example: load styles into shadow root
this.shadowRoot.appendChild(link);
Blazor.rootComponents.add(this.shadowRoot, 'elsa-studio');
}
}
customElements.define('elsa-studio', ElsaStudioElement);
```
Alternatively, styles such as the following can be replicated inside the Shadow DOM manually:
```razor
```
This can be done by dynamically injecting `` elements or using `adoptedStyleSheets` (where supported).
### Proposal
Introduce a supported option in Elsa Studio to render its root component into a Shadow DOM root—either via an opt-in flag or by providing a helper method for wrapping it as a custom element.
This would significantly improve composability and ease of integration for consumers of Elsa Studio in more complex or style-sensitive host applications.
Essentially, we want to be able to host the following Blazor components, which are wrapped as custom elements, from the shadow dom:
```csharp
builder.RootComponents.RegisterCustomElsaStudioElements();
builder.RootComponents.RegisterCustomElement("elsa-backend-provider");
builder.RootComponents.RegisterCustomElement("elsa-workflow-definition-editor");
builder.RootComponents.RegisterCustomElement("elsa-workflow-instance-viewer");
builder.RootComponents.RegisterCustomElement("elsa-workflow-instance-list");
builder.RootComponents.RegisterCustomElement("elsa-workflow-definition-list");
```
Contributor guide
Assessment
This issue has not been assessed yet.