Re: [csswg-drafts] [scroll-animations-1] Scope of Named Timelines (#7047)

> Current proposed text is not unreasonable, but I think this is the first time we would introduce a style resolution dependency between siblings? It's probably not ideal for parallel style resolution (which Firefox does, cc @emilio).

I think `counter-increment` already creates such a dependency, see the MDN [example](https://developer.mozilla.org/en-US/docs/Web/CSS/counter#decimal-leading-zero_compared_to_lower-alpha). Note the use of counter-reset could technically be considered a scope to the counter but works globally for all following elements without it.

> Are important use-cases not satisfied if we downgrade to the following?
> 
> * the declaring element itself
> * that element’s following siblings and their descendants
> 
> _EDIT: after reading this ~1 month later: I'm not sure what I meant here, and why this would help. Maybe I meant that the scope could be just the element and its descendants (no siblings)._

Yes, I think @brunostasse touched on one. There are many cases where the animation is outside of the scrolling container.

> Making these references "global" have been discussed before. (Never mind _how_ for a moment). Is this still on the agenda, or has that idea been discarded?

The issue with global namespaces is the lack of reusability. E.g. if you had a tabbed component which used a global named scroll timeline to indicate the active tab, adding a second one would result in a name conflict. Whereas if we have proper name scoping they will each work independently.

One way we could make the use case @brunostasse mentioned work while still having an explicit element and its descendents scope would be for the timeline to be able to be named early but choose the actual descendant scroller it references later. This could be thought of as similar to the `counter-reset` / `counter-increment` and `toggle` / `toggle-trigger` properties. It would require plugging in the eventually found scrolling component to the timeline created earlier.

E.g. maybe this is something like:
```html
<style>
#outer {
  scroll-timeline-name: foo;
}
#scroller {
  scroll-timeline-source: foo; /* Makes this element the source for foo. Last element within the scope to do so wins? */
}
</style>
<div id="outer">
  <div id="scroller"></div>
</div>

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


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

Received on Wednesday, 29 June 2022 12:46:30 UTC