- From: Nick Williams via GitHub <sysbot+gh@w3.org>
- Date: Tue, 05 Jul 2022 12:36:37 +0000
- To: public-css-archive@w3.org
OK there is actually a workaround for my use case above. You can get around the self-reference problem with two elements:
```css
.outer { --_a: var(--a, 0) }
.inner { --a: calc(var(--_a) + 1) }
```
In my use-case i'm building web components, so I don't really need two elements: I can instead target the `:host` and it's direct descendants (either a `<slot>` or a wrapper element):
```css
:host { --_a: var(--a, 0) }
:host > * { --a: calc(var(--_a) + 1) }
```
Here's an example codepen demoing the [basic approach](https://codepen.io/WickyNilliams/pen/MWVaqxB). And here's a more [complex example with multiple components of different sizes](https://codepen.io/WickyNilliams/pen/MWVaPKz).
--
GitHub Notification of comment by WickyNilliams
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-1175009676 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 5 July 2022 12:36:39 UTC