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
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 { ... }matchesDocument.documentElementonly..dark <descendant>needs.darkon an ancestor in the same tree; shadow host is outside.@custom-variant dark (&:is(.dark *))compilesdark:utilities into.dark\:foo:is(.dark *), same issue.Proposed fix (purely additive, doesn't affect non-shadow use):
PR: #506