Skip to content

bug: Start/End node styles reference unavailable Tailwind CSS variables inside Shadow DOM #260

Description

@fantonangeli

Describe the Bug

Some Start/End node styles reference CSS variables that are not available when the Diagram Editor is embedded inside a Shadow DOM host using Web Components.

Observed examples include missing Tailwind internal variables such as --tw-border-style.

Steps to reproduce

  1. Build @serverlessworkflow/diagram-editor.
  2. Embed the Diagram Editor in a Shadow DOM host application.
  3. Load the generated dist/styles.css inside the shadow root.
  4. Render a workflow containing Start/End nodes.
  5. Notice that the Start/End nodes are missing the expected border styling.

Expected Behavior

Start/End nodes should render with the expected border and styles without relying on undefined CSS variables.

Editor Version

0.1.0

Platform

Web / Browser

Additional Context

This was noticed while embedding the Diagram Editor in Quarkus Dev UI, which uses Lit/Web Components and Shadow DOM.

Image

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

Fields

No fields configured for Bug.

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions