I want to pin evaluation of a CSS custom property to the element it's defined on

[aarongustafson]

---

title: I want to pin evaluation of a CSS custom property to the element it's defined on
date: 2020-12-04T19:35:43.617Z
submitter: PRIVATE
number: 5fca8f8fcb050301104f7a6a
tags: [ ]
discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/
status: [ discussing || in-progress || complete ]
related:

• title:
  url:
  type: [ article || explainer || draft || spec || note || discussion ]

---

As an example, if I need to know the width of a container element to calculate the width of a deeply nested element:

.container {
--container-width: 100%;
}

.container__deeply-nested-element {
// what I need is the actual container width to be able to correctly
// calculate the desired width of the nested element...
// but 100% is evaluated here to the element's parent :(
width: calc(var(--container-width, 0) / 3);
}

---

If posted, this will appear at https://webwewant.fyi/wants/5fca8f8fcb050301104f7a6a/

[aarongustafson]

@phloe Could you expand on this a bit more? I think I know where you’re coming from, but I want to make sure.

[phloe]

I want to be able to pin the evaluation of relative units in custom properties to the actual element I defined said custom property on. So every time it is used further down the node tree it will still look at the original element for evaluation (meaning it's stil live/dynamic - not just a static number).

Does that help?

Obviously this would require some new syntax - I haven't given that any thought :D

[github-actions]

This has gotten stale. Take a look or close it out.