Re: [csswg-drafts] [css-contain] CQ vs shadow boundaries (#5984)

I think this is an interesting case. Two selectors for the same element in different scopes querying the closest container for inline-size:

```html
<!doctype html>
<style>
  host-element, host-child {
    container-type: inline-size;
  }
  @container (width <= 300px) {
    host-child {}
  }
</style>
<host-element>
  <template shadowroot="open">
    <style>
      inner-container { container-type: inline-size; }
      @container (width <= 200px) {
        ::slotted(host-child) {}
      }
    </style>
    <inner-container>
      <slot></slot>
    </inner-container>
  </template>
  <host-child>Light content</host-child>
</host-element>
```

Do we want host-child to have host-element as its container when the query/selector is in the host-child tree, and have inner-container as the container for the ::slotted rule?

If we just look for the container in the element's own tree, we would not be able to style slotted elements inside the shadow tree. Is that acceptable?


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


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

Received on Monday, 1 November 2021 15:39:06 UTC