html - Do HTML5 custom elements have any drawbacks compared to classes?

Question

I don't like div soups. You don't easily see which end tag belongs to which start tag (correct indentation helps, I know), yadda yadda. HTML5 introduced custom elements. Is there any drawback using them instead of classes except for browser support, since older Edge and IE don't support them? I think this this HTML code:

<blog-posts>
  <blog-post>
    <blog-title>Do HTML5 custom elements have any drawbacks compared to classes?</blog-title>
    <blog-content>I don't like div soups</blog-content>
  </blog-post>
</blog-posts>

is much nicer to read than

<div class="blog-posts">
  <div class="blog-posts">
    <div class="blog-title">Do HTML5 custom elements have any drawbacks compared to classes?</div>
    <div>I don't like div soups</div>
  </div>
</div>

If I understood correctly, even if I don't call document.registerElement for my custom elements, this will work just fine, since the elements will by default inherit from HTMLElement, which gives my more or less the same behavior as the HTMLDivElement.

question from:https://stackoverflow.com/questions/65857105/do-html5-custom-elements-have-any-drawbacks-compared-to-classes

Answer 1

Always distrust developers who tell you what you should or shouldn't do.

It is your code, if it works for you, it works.

You are using W3C standard technologies so it will work for as long Browsers run JavaScript.

Yes, Web Components V0 (Google threw something against the wall) got a bad reputation;
but we are on V1 now, since 2018, and Google, Apple, Mozilla, Microsoft are now more closely working together.
(WTF.. Where is Facebook?)

Personally, I prefer:

<blog-posts-listing>
  <blog-post title="Do HTML5 custom elements have any drawbacks compared to classes?"> 
    I don't like DIV soups
  </blog-post>
  <blog-post title="What is the future for React?" tags="React">     
    I don't like **JSX** soup either
  </blog-post>
</blog-posts-listing>

Because <blog-post> would be the work-horse that creates content in shadowDOM from this lightDOM.

Good use of attributes allow for great CSS

blog-post:not([title*="React"]){
  background-color:lightgreen;
}

blog-post[title*="React"]{
  background-color:lightcoral;
}

You can even add search with minimal JS, create styles dynamically

Adding functionality like a MarkDown parser is a breeze then

Do not create HTML tags just because you can create HTML tags...

But remember what I said about Developer advice.