Hacker News Reader

This is what annoys me the most when developing web components. You never know which context your component might be used in, and your <hX> element might be just plain wrong.

I prefer not using them and fall back to using <header> elements inside sections, but styling them globally makes it rather difficult and ugly to work with. What's other people's solution to this? Or am I just picky when it comes to semantics?

View on HN

If it's super broken or critical, maybe a slot to let the user provide their desired header level would be an option? Or maybe even a simple prop would be enough. If your component is itself header-like, perhaps making 6 versions, fun-header-1, fun-header-2, etc. that are explicitly scoped to that level header would make sense too.

You could define a recursion depth parameter for your component. Or a specific header level parameter. I tend to think of spitting out HTML as something with recursive context. The CSS grid and even flex layouts come to mind as well.

Reply on news.ycombinator.com