[Proposal] relative heading elements

Headings should have a hierarchical structure, start with an <h1> and work down as needed.

But what happens when we don’t know the structure of the rest of the page, when we’re embedding content or inserting a component etc.

What if the heading could be relative to the rest of the page, these would still keep the role="heading" but the aria-level 1-6 would be generated on page load.

<heading-primary> aria-level="0" This will apply the highest level possible (if there is no <h1> on the page, this will act as an <h1> if there is an <h1> this will act as an <h2>)

<heading-sibling> aria-level="sibling" this will match the aria level of the previous heading

<heading-child> aria-level="child" this will be 1 level lower than the previous heading (if the last heading was an <h2> this works as an <h3>)

<heading-parent> aria-level="parent" this will be 1 level higher than the previous heading (if the last heading was an <h3> this works as an <h2>)

So this code

<heading-primary></heading-primary>
  <heading-child></heading-child>
    <heading-child></heading-child>
    <heading-sibling></heading-sibling>
  <heading-parent></heading-parent>
  <heading-sibling></heading-sibling>
    <heading-child></heading-child>

Would be read as this

<h1></h1>
  <h2></h2>
    <h3></h3>
    <h3></h3>
  <h2></h2>
  <h2></h2>
    <h3></h3>

But if it’s loaded in a page that already has an <h1> it would become

<h2></h2>
  <h3></h3>
    <h4></h4>
    <h4></h4>
  <h3></h3>
  <h3></h3>
    <h4></h4>

This is similar to the idea around effectively resetting the heading structure inside a section. Maybe that makes this suggestion redundant, but i thought I’d share anyway it and see if this sparks some ideas or interest.