Re: [csswg-drafts] [css-values-4] inherit() function: like var() for parent value, for any property (#2864)

If I'm understanding your example correctly, it seems like that works the way you'd want, right?

That is, I'm assuming a markup structure like:

```html
<pfe-layout>
  <::shadow>
    <style>
    :host { background-color: #eee; }
    </style>
    <pfe-type>
      <::shadow>
        <style>
        :host {
          color: color-contrast( inherit(background-color), white, gray, black );
        }
        </style>
      </::shadow>
    </pfe-type>
  </::shadow>
</pfe-layout>
```

So by default, `pfe-layout` has a light gray background, and `pfe-type` sets its text color to contrast against that (choosing black).

Then if the outer page sets `pfe-layout { background-color: #252527; }`, giving `pfe-layout` a dark gray background, `pfe-type` will still set its text color to contrast against that (choosing white).

Is there a detail I'm missing that makes this not work?


--------

Edited before posting!

Ah, I think I see, you're saying that if `pfe-type` is *not* a direct child of `pfe-layout`, then it couldn't use the code you gave to directly grab 'background-color', and instead `pfe-layout` would have to set a custom property which then inherits down to `pfe-type`. And `pfe-layout` would have to document that users should set the background color with `--pfe-layout-bg` or something, right?

This shouldn't be necessary with @andruud's technique. If you have a wrapper element inside of `pfe-layout`'s shadow, then you can set `--bg-color: parent(background-color);` to grab the background-color from `pfe-layout`, and then all descendants can just refer to that property. Since `parent()` is evaluated at the same time as `var()`, this will correctly grab the color from `pfe-layout` (rather than inheriting, unevaluated, to descendants, and then grabbing some random parent's value when it's actually used).

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


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

Received on Tuesday, 13 April 2021 00:14:15 UTC