Re: [csswg-drafts] [css-overflow-5] Tree structure of scroll container controls (#11125)

> So with option 2 the generated tree would look like this:
> 
> ```
> ::scroll-button(*)
> <scroller></scroller>
> ::scroll-marker-group
> ```
> 
> correct? But they're still selected as children of scroller, like `scroller::scroll-button(*)`?

That's correct. The chromium implementation of `::scroll-marker-group` and the spec suggest matches option 2 right now. However currently the chromium implementation of `::scroll-button(*)` is implemented following option 1, so you can see the difference between them on the canary channel with experimental web platform features enabled as well.

> I guess options 2 and 3 allow you to break out of the scroller's clipping, so that gives more styling freedom OOTB.
> 
> IIUC, with option 1 they're clipped by the scroller, which gives less styling freedom for this model. Although this option feels more intuitive, I suppose it will require more opinionated default UA styling to be visually correct by default, since without correct initial positioning it would appear broken.

That's right, it takes more careful styling to get them to behave as expected and is less flexible. Note that they don't necessarily have to be clipped by the scroller, if they're `position: absolute;` and the scroller is `position: relative` than things mostly work as expected. However, this is also limiting, and feels like a bit of a gotcha.

> I think it would be helpful to visualize how we want these to render by default? And with what UA styles? And then see for each option, what it takes to reach different layout use-cases.

I made a [demo page](https://flackr.github.io/carousel/examples/pseudo-structure/) showing roughly what the different structures would look like if minimal styling were used. Were you thinking that it would be helpful to show how a developer might achieve some common expected designs with each structure?

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


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

Received on Monday, 4 November 2024 21:16:34 UTC