- From: orstavik via GitHub <sysbot+gh@w3.org>
- Date: Thu, 27 Oct 2022 13:45:54 +0000
- To: public-css-archive@w3.org
@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