shadow dom is a new document and it could have a similar unit like rem that target :host.
component elements would benefits of being scalable.
You would be also able to define the component size like in the following example
font-size: 16px; // component scale
inside web component
Would rem not work? I am still learning web components so this may be an ignorant question.
This is what custom properties/variables are for.
rem is precisely equivalent to setting a
--rem: XXpx; value (it has to be an absolute length to work the same) on the root element, and then just using
Similar, a component can just query its host element’s font size, and then set a variable appropriately for its own use.
If I understand correctly, the original example would be written as:
font-size: calc(1.2 * var(--hem));
Are there plans to add syntax sugar for this? If not, developers may resort to PostCSS plugins, which could complicate things.