Re: [csswg-drafts] [css-variables?] Higher level custom properties that control multiple declarations (#5624)

If we are about to constraints things that much, I am not sure why not using "inheritable" attributes like we already have for `lang` and `:lang(...)`. The implementation cost seems way lower and it doesn't appear to produce less value.

As a straw man, let's pretend we add `data-attr(xyz)` that can get the value of the `data-xyz` attribute as a token stream if it exists, and looks at the parent element if it does not exist (similar to the `lang` attribute) eventually return an invalid value (or an empty token stream?) if we reach the root without finding the attribute.

```
<div class="toolbar" data-accent-color="red">
    ...
    <svg class="icon">...</svg>
    ...
</div>
```

```css
svg[data-attr(accent-color)] {
  svg.icon { color: data-attr(accent-color); }
}
```

It's really easy to invalidate, any attribute that is every used in a `data-attr(...)` function invalidates the style of the descendants on mutation.

Then, we can add new attribute selectors comparison operators that interpret the value of the attribute as in a media query. These would be usable on existing attributes (we can finally do stuff like `[number(size)<=3]` for stuff like `<font size="2">`) and can use that also on the inheritable attributes.

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


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

Received on Wednesday, 3 February 2021 19:10:31 UTC