[css-overflow-5] Should nested scroll-marker generating elements result in nested ::scroll-marker pseudo-elements?

[flackr]

Consider the following demo also prototyped at https://codepen.io/flackr/pen/JoPxZmV:

<style>
section::scroll-marker {
  content: attr(data-title);
}
</style>
<section data-title="About">
  <section data-title="Who">
  </section>
  <section data-title="What we do">
  </section>
</section>

1. This could generate a flat list of markers:

   • About
   • Who
   • What we do

2. Or, should the generated ::scroll-marker pseudo-element for About contain the markers established by descendant elements, e.g.

   • About
     • Who
     • What we do

I've written up an example of what this might look like for both table of contents like scenarios and dot-like scenarios. This does affect how you would have to handle dots to have them render nicely. E.g you'd probably need the dots containing other dots to render their dot as a ::before so that it doesn't wrap all of its descendants.

[flackr]

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.

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.:

<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).