Css Variables from External URL link inside of a shadow dom not getting recognized

[glespinosa]

Describe the problem: CSS Variables is not being recognized by the react shadow and those styles are not being implemented in an element

In the inspect element this how it looks like

Here's how I link the external stylesheet inside of the react shadow by using link and import

Solutions? Do we have a way that the react-shadow can recognized those css variables?

[HarlesPilter]

If those variables are defined with
:root { --heading-font: 'Roboto' }
then you need to change it to either :host { --heading-font: 'Roboto' } or :root, :host{ --heading-font: 'Roboto' }