Better support for shadow DOM

[emilmuller]

In one particular case, I'm finding myself having to put the entire Tailwind stylesheet inside a shadow DOM to avoid conflicts with another styling system.

However, inside the shadow DOM, it seems like the @Property directive gets completely ignored by Chrome. E.g. this gets ignored:

<shadow-root>
  <style>
    @property --tw-border-style { /* THIS GETS COMPLETELY IGNORED */
      syntax: "*";
      inherits: false;
      initial-value: solid;
    }

    .foo {
      border-style: var(--tw-border-style);
    }
  </style>

  <div class="foo"></div>
</shadow-root>

Causing no borders to function without me manually defining it for :host.

Seems to be documented here: https://developer.chrome.com/docs/css-ui/css-names under 'Exception to the rule [...]'.

Would be great if there was some way of using it with shadow DOM like this.