Add Shadow DOM support to Elsa Studio custom elements

[Copilot]

This PR implements comprehensive Shadow DOM support for Elsa Studio, enabling full style encapsulation when embedding components as custom elements. This addresses the need for safer integration in host applications with existing styles that could conflict with Elsa Studio's styling.

Key Features

• Shadow DOM Encapsulation: Custom elements can now render within Shadow DOM for complete style isolation
• Configuration-Based: Enable/disable via ShadowDOM.Enabled setting in appsettings.json
• Backward Compatible: Existing custom elements continue to work unchanged
• Automatic Style Injection: Required CSS stylesheets are automatically loaded into Shadow DOM
• Framework Agnostic: Works seamlessly with Angular, React, Vue.js, and vanilla JavaScript

Implementation

TypeScript/JavaScript

• Added shadow-dom.ts module with core Shadow DOM functions
• Implemented registerBlazorCustomElementWithShadowDOM for Shadow DOM-enabled custom elements
• Automatic injection of Elsa Studio stylesheets into Shadow DOM roots

C# Integration

• Extended IDomAccessor interface with Shadow DOM methods
• Updated DomJsInterop implementation for JavaScript interop
• Added ShadowDOMExtensions class for easy component registration

Configuration

• Added Shadow DOM configuration section to appsettings.json
• Updated Program.cs to conditionally register Shadow DOM components

Usage

<!-- Regular custom element (may have style conflicts) -->
<elsa-workflow-definition-editor definition-id="my-workflow"></elsa-workflow-definition-editor>

<!-- Shadow DOM custom element (fully isolated styles) -->
<elsa-workflow-definition-editor-shadow definition-id="my-workflow"></elsa-workflow-definition-editor-shadow>

Available Shadow DOM Elements

Component	Regular Element	Shadow DOM Element
Backend Provider	elsa-backend-provider	elsa-backend-provider-shadow
Workflow Definition Editor	elsa-workflow-definition-editor	elsa-workflow-definition-editor-shadow
Workflow Instance Viewer	elsa-workflow-instance-viewer	elsa-workflow-instance-viewer-shadow
Workflow Instance List	elsa-workflow-instance-list	elsa-workflow-instance-list-shadow
Workflow Definition List	elsa-workflow-definition-list	elsa-workflow-definition-list-shadow

Benefits

• Style Isolation: Prevents style bleed between host application and Elsa Studio
• Safe Embedding: Enables safer integration in diverse frontend environments
• Modern Standards: Aligns with Web Components best practices
• Framework Integration: Works with Angular, React, Vue.js, and vanilla JavaScript

Documentation

• Added comprehensive documentation in docs/SHADOW_DOM.md
• Created framework integration examples and demo pages
• Updated README with Shadow DOM information
• Included validation scripts for testing the implementation

Browser Support

Shadow DOM is supported in all modern browsers (Chrome 53+, Firefox 63+, Safari 10+, Edge 79+).

Fixes #550.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[sfmskywalker]

Closing per Elsa 3 Crew Lead PR-triage policy: abandoned Copilot/bot draft (or Copilot PR on an obsolete base). Please reopen with a fresh PR against a current base if this work is still needed.