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
my-component {
font-size: 16px; // component scale
}
inside web component
<style>
.element {
font-size: 1.2hem;
}
</style>
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 var(--rem)
.
Similar, a component can just query its host element’s font size, and then set a variable appropriately for its own use.
1 Like
If I understand correctly, the original example would be written as:
<style>
.element {
font-size: calc(1.2 * var(--hem));
}
</style>
Are there plans to add syntax sugar for this? If not, developers may resort to PostCSS plugins, which could complicate things.
1 Like