Re: [csswg-drafts] [css-scoping-1] Dynamic changes of state and attributes referenced by :host-context rules are pretty hard to handle efficiently. (#1914)

> If the host and the elements in nested trees are coordinated (as in both the "chart" and the "subheading" use cases) the outer component can definitely pass the relevant information to the inner components, right? Or what am I missing?

@emilio Definitely a fair point and in a design system it would make sense for the authors to make a sharable "context" between nested components.  The downside is that you're recreating CSS cascading in javascript.  Components would be required to tie into a shared context/provider API.

For example, our color context in Patternfly Elements.  Our components are responsible for telling child components what background context they reside on.  We do this by providers adding the `on` attribute to consumers.

```html
<pfe-band color="dark">
  <section>
    <pfe-clipboard on="dark"></pfe-clipboard>
  </section>
</pfe-band>
```
pfe-clipboard.css
```css
:host([on="dark"]) {
  --pfe-clipboard--icon--Color:  #fff};
  --pfe-clipboard--icon--Color--hover: #fafafa;
}
```

If pfe-clipboard had access to the parent context, it would eliminate the need for a proprietary context provider/consumer.  We could target a parent attributes and inherit all of the cascading goodness:

pfe-clipboard.css
```css
:host-context([color="dark"]) {
  --pfe-clipboard--icon--Color:  #fff};
  --pfe-clipboard--icon--Color--hover: #fafafa;
}
```



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


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

Received on Tuesday, 19 October 2021 16:52:47 UTC