elsa-workflows / elsa-workflows/elsa-studio

Add Shadow DOM support to Elsa Studio

Open
#550 0 comments 1 reaction 1 assignee Assigned to @Copilot View on GitHub
triaged
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.