Skip to content

feat: ship an embeddable Studio React component (shadow-DOM friendly) #505

@0-don

Description

@0-don

Embedding Studio inside a Shadow Root (to keep Tailwind preflight from leaking into a host app) breaks all theme tokens + dark mode, because none of these selectors cross the shadow boundary:

  • :root { ... } matches Document.documentElement only.
  • .dark <descendant> needs .dark on an ancestor in the same tree; shadow host is outside.
  • @custom-variant dark (&:is(.dark *)) compiles dark: utilities into .dark\:foo:is(.dark *), same issue.

Proposed fix (purely additive, doesn't affect non-shadow use):

- @custom-variant dark (&:is(.dark *));
+ @custom-variant dark (&:where(.dark *, :host(.dark) *));

- :root { ... }
+ :root, :host { ... }

- .dark { ... }
+ .dark, :host(.dark) { ... }

PR: #506

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions