3rd level of nesting <section> breaks fragments in next slide

[skyboyer]

In summary

Having 3+ nesting for <section> does not work well

Longer description

Next markup works fine:

<section>
	<section>
		<h1>Start</h1>
	</section>
	<section>
		First one nested
	</section>
	<section>
		Another nested
	</section>
	<section>
		<h1>0</h1>
		<h1 class="fragment">1</h1>
		<h1 class="fragment">2</h1>
		<h1 class="fragment">3</h1>
	</section>
	<section>
		<h1>End</h1>
	</section>
</section>

It shows "Start", then "The only nested" text, then "0" appears, then "1" is appended, then "2" and so on.

But if we introduce another level of nesting:

<section>
	<section>
		<h1>Start</h1>
	</section>
	<section>
		<section>
			First one nested
		</section>
		<section>
			Another nested
		</section>
	</section>
	<section>
		<h1>0</h1>
		<h1 class="fragment">1</h1>
		<h1 class="fragment">2</h1>
		<h1 class="fragment">3</h1>
	</section>
	<section>
		<h1>End</h1>
	</section>
</section>

we have 2 issues on demo:

1. "First one nested" and "Another nested" are shown simultaneously
2. fragments with "1", "2", "3" and shown at the same time and presentation immediately move to the next slide.

Recording: https://drive.google.com/file/d/1B_36zXWSiwEyWQjKsAG1ygxMB0sS-nd8/view?usp=drive_link

Side thoughts

It makes sense, 3rd level or deeper does not fit into "2D structure" concept. And I made that "extra nesting" fully by accident, without no special goal in mind. However, it took few hours to debug root cause why fragment stopped working only to a specific part of the presentation.

Proposed solution

Some safety net to display warning or error "only 2 level nesting are supported for <section>" in runtime and include it into documentation(https://revealjs.com/vertical-slides/ and maybe somewhere else)

[skyboyer]

how about a popup over all the presentation?

section:has(>section>section)::after,
section>section>section {
    content: "Nesting <section> more than 2 times is not supported";
    position: fixed;
    top: 0;
    left: 0;
    color: red;
    background-color: white;
    border: 1px solid red;
    z-index: 999;
}

or is it too dramatic? Since Firefox does not support :has yet, there is also a selector to put error message on specific part/slide