5 ms·
Why not use CSS without the custom element? From this post I don't see the benefit of using <swim-lanes> over <section class="swim-lanes"> for example.
by pbowyer 9mo ago
Why not use CSS without the custom element? From this post I don't see the benefit of using <swim-lanes> over <section class="swim-lanes"> for example.
- etchalon 9mo agoA 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" />
- smrq 9mo ago"Clean" is the biggest lie in software development. It's an aesthetic opinion dressed up as objective fact. You think components are clean, someone else thinks classes are clean, and neither of you are wrong, except for believing that "clean" is a property of the code and not something entirely in your own mind.
- etchalon 9mo agoI'm going to start using this logic whenever my wife talks about my office.
- pier25 9mo ago> Specificity :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/ 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.
- etchalon 9mo ago1. ... I do not understand what you mean. 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.
- grodriguez100 9mo ago2. Yet it was you who said “future” in the first place…
- Kerrick 9mo agoArguably, 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>.
- akst 9mo agoWeb components come with additional complexity, heavy use of custom element definitions are more complicated to manage. 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.
- Kerrick 9mo agoHTML had custom elements before Web Components (the complex modern JavaScript & Shadow DOM thing) came into being. https://www.w3.org/TR/2016/WD-custom-elements-20160523/ https://www.w3.org/TR/2016/WD-custom-elements-20160523/
- akst 9mo agoIn case you’ve forgotten this is a thread on an article about web components. If the underlying premise of your point was entirely independent of web components you’ve done pretty poor job of communicating it. So you actually do that? Use custom elements without web components instead of using classes? Are you using in something like react with custom elements foregoing type safety to avoid a div element? Or is this just in plain HTML? How many custom elements does your typical web project have? Or are you fixating on an irrelevant technicality to make an irrelevant point?
- Kerrick 9mo ago...? The article is literally about not using web components. FTA: > What would happen if we took the ideas of HTML Web Components and skipped all the JavaScript? [...] Okay great, we styled some HTML nested inside a custom element.
- spartanatreyu 9mo agoIf 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.