Re: [csswg-drafts] [css-overflow-5] Should nested scroll-marker generating elements result in nested ::scroll-marker pseudo-elements? (#11601)

An alternative would be to have another property value that could group markers beneath it. A strawman for this would be:

scroll-marker-group: none | before | after | **contain**

When scroll-marker-group is set to contain, it could create a nested `::scroll-marker-group` pseudo to contain all of the `::scroll-marker` and `::scroll-marker-group` pseudo-elements established within.

Going back to the example from the OP, you could either use tricks with the first-child, e.g.
```css
section {
  scroll-marker-group: contain;
}
section::scroll-marker-group > ::scroll-marker-group {
  padding-left: 1rem;
}
section::scroll-marker {
  content: attr(data-title);
  padding-left: 1rem;

  &:first-child {
    padding-left: 0;
  }
}
```

This would create the following pseudo-structure:
```
::scroll-marker-group
+ ::scroll-marker (content: "About")
+ ::scroll-marker-group
  + ::scroll-marker (content: "Who")
+ ::scroll-marker-group
  + ::scroll-marker (content: "What we do")
```

Or modify the structure so that the owning item preceeded its containing group, e.g.:

```html
<style>
.contents {
  scroll-marker-group: contain;
}
section::scroll-marker {
  content: attr(data-title);
}
</style>
<section data-title="About">
  
  <div class="contents">
    <section data-title="Who">
    </section>
    <section data-title="What we do">
    </section>
  </div>
</section>
```

Creating the following structure:
```
+ ::scroll-marker (content: "About")
::scroll-marker-group
  + ::scroll-marker (content: "Who")
  + ::scroll-marker (content: "What we do")
```

Both of these strategies can achieve the expected indentation. Counter numbering is trickier with the first approach whereas with the second it is fairly natural to express (i.e. `::scroll-marker-group` establishes a counter that each `::scroll-marker` can increment and use).

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


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

Received on Wednesday, 12 March 2025 13:25:33 UTC