Add :host rule to @theme layer

[hugo-vrijswijk]

Resolves #15799
Resolves #14478
Part-of #15005

Adds a :host selector for the @theme layer. This is necessary for the @theme layer to work correctly in shadow DOM.

Also updates the snapshots for the tests that were affected by this change (in a separate commit).

Test plan

Tested via the Vite playground:

Additionally made sure that @property defaults also work across Firefox, Chrome, and Safari (the @property definition from the root is pulled in) and added a UI spec.

[lubomirblazekcz]

This should also fix #14478

[philipp-spiess]

@hugo-vrijswijk Thanks a ton for this PR! I went ahead and did a round of testing on the known repro cases and added a test plan to your description. I also added a UI spec to ensure we have some validation. Note that because of @property not being able to be scoped to a shadow root, you still have to have the stylesheet added to the browser root too.

[khopha]

@hugo-vrijswijk Thanks a ton for this PR! I went ahead and did a round of testing on the known repro cases and added a test plan to your description. I also added a UI spec to ensure we have some validation. Note that because of @property not being able to be scoped to a shadow root, you still have to have the stylesheet added to the browser root too.

@philipp-spiess Thank you for the note. Does this mean that Tailwind CSS v4 is not fully compatible with Shadow DOM? (Because we still need to add it to the browser root too.) Is there any workaround that doesn't require adding it to the browser root, or is the only workaround to downgrade to v3?

[hugo-vrijswijk]

@philipp-spiess Thank you for the note. Does this mean that Tailwind CSS v4 is not fully compatible with Shadow DOM? (Because we still need to add it to the browser root too.) Is there any workaround that doesn't require adding it to the browser root, or is the only workaround to downgrade to v3?

Below is the workaround I'm using at the moment. IMO, it is quite ugly and does go against the principles and encapsulation of shadow DOM. Since you are polluting styles outside your component. Which in turn could change other components. The other way around, your component is now susceptible to changes from properties set in the document. Ideally components are fully encapsulated and don't need to touch anything outside the host, but tailwind 4 breaks this principle.

I'm not exactly sure how CSS properties work and how they are different from variables. But if there were an option to have all the properties set as variables instead, that would solve the issue.

import tailwindCss from './tailwind.css?inline';
export const tailwind = unsafeCSS(tailwindCss);

// https://github.com/tailwindlabs/tailwindcss/issues/15005
// Set all @property values from tailwind on the document
// And only do this once (check if the there is already a stylesheet with the same content)
if (
  tailwind.styleSheet &&
  document?.adoptedStyleSheets &&
  !document.adoptedStyleSheets.some((sheet) => sheet.cssRules[0]?.cssText === tailwind.styleSheet!.cssRules[0].cssText)
) {
  const propertiesSheet = new CSSStyleSheet();
  let code = tailwind.cssText;

  code = code
    // Change custom properties to inherit
    .replaceAll('inherits: false', 'inherits: true')
    // Remove everything before the property declarations
    .substring(code.indexOf('@property'));

  propertiesSheet.replaceSync(code);

  document.adoptedStyleSheets.push(propertiesSheet);
}

[khopha]

@hugo-vrijswijk
Thank you for your workaround. I followed your approach, and it’s working fine now. Yes, it would be great if Tailwind could work properly or have an option to make it work in Shadow DOM.

[lubomirblazekcz]

Sadly it's more of a spec problem, because @property at-rule doesn't work in shadow dom.

https://stackoverflow.com/questions/78717295/property-not-recognized-in-shadow-dom