1. Specificity - swim-line.buttons vs .swin-lines.buttons vs .buttons.swim-lanes. 2. Future pathing - Maybe you don't need a Web Component today, but you might need one tomorrow. 3. Cleaner - <swim-lane /> is just better than <div class="swim-lane" />
:where() gives you zero specificity.
> Future pathing
Sounds like premature optimization. And I say this as someone who has been using custom elements and web components in production since 2016. In fact one of my products offers WCs for our customers:
https://docs.wavekit.app/web-components-wavekit-audio/
> Cleaner
Debatable. Personally I find it cleaner to simply rely on CSS to solve something rather a combination of CSS, JS, and some custom markup.
2. One person's "premature optimization" is someone else's "this was literally something I dealt with this week."
3. This method relies on CSS and HTML, just as any other styling solution would.
And since that would drive us to <div>, I don't see any value in <div class="swim-lanes"> over <swim-lanes>.
Section-relative headings were briefly part of the spec but quickly got removed. As it stands, I would not consider any block of HTML with an <hX> element portable.
[0] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
It’s more than just an aesthetic preference
But if you’re not really using web components it’s harmless but it’s a bit odd and pointless.
Also by using a custom element instead of a class, you're saying this isn't anything else other than what I say it is.
It's not a <section class="swim-lanes">, it's not a <form class="swim-lanes">, it's not a <blockquote class="swim-lanes">, it's a <swim-lanes>.
If you make something only a class, people end up misusing it in odd places.
