Advanced Web Components Styling Demo

This interactive demo explores the practical application of Shadow DOM encapsulation and advanced styling techniques for Web Components, demonstrating:

Shadow DOM encapsulation with both open and closed modes
CSS custom properties as styling API
Theme inheritance and design system integration
Constructable Stylesheets for optimized performance
Context-aware styling and adaptable components

Experiment with the controls below to see how these techniques work in practice!

Global Theme

Primary Color Secondary Color

Component Settings

Shadow DOM Mode Styling Technique

Shadow DOM vs Regular DOM

Compare how external styles affect Shadow DOM components versus regular DOM elements:

Regular DOM Element

Regular Card

This is a regular DOM element with class "card". External styles affect it.

Notice how the !important styles from the global stylesheet are applied to this component.

Shadow DOM Component

This component uses Shadow DOM encapsulation. External styles don't affect it.

Notice how the !important styles don't pierce the shadow boundary, protecting this component.

Usage Example:

            <styled-card variant="primary" title="My Card Title">
  <p>Card content goes here</p>
  <button>Card Button</button>
</styled-card>
          

Component Variants & Context Adaptation

These components demonstrate how Web Components can define variants and adapt to different contexts:

Styled Card Usage:

            <styled-card 
  variant="primary|secondary|neutral" 
  title="Card Title">
  <!-- Optional content -->
</styled-card>
          

This component detects it's in a "sidebar" context.

This component detects it's in a "main" context.

Context Card Usage:

            <!-- The component inherits context from a parent element -->
<div data-context="sidebar">
  <context-card title="Sidebar Context Card">
    <p>Card content goes here</p>
  </context-card>
</div>

<!-- Or with direct context on the component -->
<context-card 
  data-context="main" 
  title="Main Context Card">
  <p>Card content goes here</p>
</context-card>
          

Legacy System Integration

See how Shadow DOM protects components from aggressive legacy styles:

Admin Dashboard (with legacy CSS)

This section simulates a legacy system with aggressive styling that would normally break components.

Regular DOM Component

Unprotected Component

This regular DOM component is affected by the legacy styles.

Shadow DOM Component

This component is protected from the legacy styles by Shadow DOM encapsulation.

Combined Usage Example:

              <!-- Component with all available options -->
<styled-card 
  variant="primary" 
  title="Card with Options"
  data-context="sidebar">
  <p>This card combines variant and context features</p>
  <button>Action Button</button>
</styled-card>
            