Re: [csswg-drafts] [cssom] `ComputedStyleObserver` to observe changes in elements' computed styles (#8982)

> Not to bring down the hype here, but I feel like one of the most important questions around this proposal is about the timing of the API.

Agreed. I don't think this brings down the hype.

> Assuming its name is really `ComputedStyleObserver` I would assume it would fire whenever a recalc occurs … This would at least allow preventing the change if needed.

Note that:

```js
el.style.setProperty('--foo', 'bar');
```

…doesn't trigger a recalc. In normal circumstances, a recalc won't happen until the render steps. Calling something that reads layout (`offsetWidth`, `getBoundingClientRect`) or something that reads computed style (`getComputedStyle`) will cause a recalc to be performed earlier.

Let's say you had an observer that tried to 'prevent' the change of `--foo` to `bar`:

```js
console.log(el.style.getProperty('--foo')); // Still 'bar'
console.log(getComputedStyle(el).getProperty('--foo')); // Still 'bar'
```

Even though `getComputedStyle` causes the recalc, if you observer is off by a microtask, it doesn't really get to prevent anything.

Because of this, it seems better to fire the observer synchronously during recalc, which is already debounced. Or, accept that it's async and fire it in the render steps.

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


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

Received on Monday, 2 September 2024 11:48:40 UTC