[csswg-drafts] [css-values] hem: font-relative unit, relative to host element font-size (#7613)

jonathandewitt-dev has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] hem: font-relative unit, relative to host element font-size ==
For better CSS encapsulation using Shadow DOM, it would be nice to enable relative sizing without coupling styles to the HTML structure.

## The `em` Problem:
`2em` at the browser default `16px` becomes `32px`.  Children of that component now interpret `1em` as `32px`.  This makes it very difficult to keep track of sizes going down the tree, and it tightly couples the styles to the HTML structure.  It would be better to have a common base size shared between all elements.

## The `rem` Problem:
`1rem` is always at the browser default, since Shadow DOM cannot access the consumer's root element. This is a good thing for encapsulation, but it also means the component's scale is always static. It would be preferable to allow the consumer to provide a base size for the component.

## The Proposed `hem` Solution:
`1hem` could be equivalent to the component's `:host` element font-size.
```html
<x-calendar></calendar>
```
```css
x-calendar {
  --size: 0.5rem; /* by default, this will be 8px */
}
```
```css
/* inside x-calendar's Shadow DOM */
:host {
  font-size: var(--size);
}
.calendar-wrapper {
  width: 50hem; /* this will be 400px, as 1hem is relative to 0.5rem (8px) as defined above. */
}
```

## Alternative:
If it makes more sense to do so, we could perhaps consider allowing styles on the shadow root via `:root`, and just use `rem` as we usually would.

### Link to the spec:
https://www.w3.org/TR/css-values/#font-relative-lengths


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7613 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 17 August 2022 00:12:47 UTC