Arguably, that would be misuse of the semantic meaning of "section." While <section> is nearly as generic as <div>, they should always have a heading of their own. The author's <swim-lane> already has a nested <section> with its own <h2>, but the <swim-lane> itself doesn't get (or need) its own even-higher heading.

And since that would drive us to <div>, I don't see any value in <div class="swim-lanes"> over <swim-lanes>.

If you're not actually getting anything semantically useful out of the element, then you may as well use a custom element.

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.

A handful of benefits:

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" />