Re: [csswg-drafts] [css-contain-3] Should not cq units be interpreted in the flatDom context? (#7947)

@philkunz gives a [good description](https://github.com/w3c/csswg-drafts/issues/5984#issuecomment-1058927646) of the ownership role the shadowDom/web component has when establishing a "slotting context". And we should extend it:

 * the slotting context has always provided/overridden css variables to slotted elements (up to the lightDom).
 * the slotting context determine the value of normal relative length units such as `%` and `em` for slotted elements (up to the lightDom).

At the top of my head I can think of only one CSS value (in addition to `cqw` et.al.) that is interpreted against the document only context: [css animation names](https://jsfiddle.net/wa2rp3ht/).

On the other side, CSS selectors are interpreted against the document only context. Only a few, clearly marked CSS selectors such as `:host`, `::slotted()`, and `::part()` are interpreted against the flatDom. 

In my head, this produce the following CSS x document/flatDom model.
```css
@query {                 /*interpreted against the document/lightDom*/
  selector {               /*interpreted against the document/lightDom*/
    property: value;   /*interpreted against the flatDom/shadowDom wins*/
  }
}
```

If this is the conceptual model, then that would mean that container queries should be interpreted within the document/lightDom context. As with animations. While the container query units such as `cqw` should be interpreted against the flatDom, as `%` and `--var`.

I don't know. Maybe it is possible to wrap all the things you need to slot in a `<something>` in the lightDom, then slap `container-type: inline-size` onto that something, and then put the elements you plan to slot into that `<something>` and then you can use `cqw` on your slotted elements. A lightDom `<slot>` mirror of sorts. Or, maybe the better choice is to add a `ResizeObserver` to all the `<slot>` elements inside the shadowRoot whose `cqw` you need to expose to the slotted elements (lightDom) and then make those resizeObserver produce a `--cqw` variable reflecting the width of the `<slot>` element. And then go to town with `calc(var(--cqw) * 42)`. [It feels like.](https://github.com/w3c/csswg-drafts/issues/5984#issuecomment-1059707072)

-- 
GitHub Notification of comment by orstavik
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7947#issuecomment-1293550707 using your GitHub account


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

Received on Thursday, 27 October 2022 13:45:56 UTC