How to use heading elements within a custom element?

Question

Per this issue with the W3C html spec, using nested sections with multiple h1's is discouraged because no browsers implement the outline algorithm needed to make them work semantically.

However, if I have a custom element that needs to use a heading element, I haven't been able to find the recommended way for it to figure out what the heading level is where it's being upgraded/inserted into (so the element can determine which h1-h6 to use)

I found this article detailing some workarounds for the issue (that applies to components more generally), as well as one specific to React, but they all seemed a little clunky.

It seemed like this could be a common enough problem for there to be a recommended pattern on how to handle it (better than just passing/managing an attribute for it), but I don't know what that would be (I'm fairly new to web components)

Katt

Can you detail what the purpose is of the custom component? The way I see it, let’s say you have a Card component, and you’ll always use it in your <main> content, then you can pretty much count on using, say, an <h2> for its heading. I’m sure you are using it for something more complex, which causes your problem, I’m just saying that on most websites you’d avoid this by designing a proper document structure. – Dauphine

It came up as I was working on an example project to learn more about semantic html. I wanted to use web components to help modularize the content too (and learn more about how to use them). In my case I can (and did) hard-code the heading levels in each component, but it struck me as bad practice if I actually wanted the components I make to be re-usable elsewhere (like published to webcomponents.org or something similar) – Katt

Headings without levels, or relative heading levels are possible new additions to HTML github.com/whatwg/html/issues/7390 – Crimp

True, though I'm not able to find any evidence of implementations of them (or active/published specs for that matter). And fwiw I think for now I've come to terms with having to manage this at the app level/interface between components (not ideal ofc) – Katt

The issue is even more relevant in CMSs, who’s main purpose is to manage and structure content, and even there they don’t care enough to simply pass a parameter ): #72535368 – Bodice

Thanks so much for starting this and sharing that great article. I care quite about this issue, but maybe we shouldn’t. Having headlines in a web application in the first place is already a big step forward, and maybe—just maybe—screen reader users aren’t as much put off by a messed up hierarchy in components as we’d like to think. I would love to know some insights from research. – Bodice

No problem. And the 1 data point I've come across was from this podcast short episode - a11yrules.com/podcast/… - which agrees with your hypothesis, though I think it was only in the context of iOS (and maybe Android too) – Katt