Hem, rem for web component

CSS
1

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>
2

Would rem not work? I am still learning web components so this may be an ignorant question.

3

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
4

Good point tabatkins!

5

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