时间戳

首页 > 解决方案 > Do HTML5 custom elements have any drawbacks compared to classes?

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

问题描述

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.

标签： html

解决方案

永远不要相信那些告诉你应该做什么或不应该做什么的开发人员。

这是你的代码，如果它对你有用，它就可以工作。

您正在使用 W3C 标准技术，因此只要浏览器运行 JavaScript，它就可以工作。

是的，Web Components V0（谷歌把东西撞到墙上了）名声不好；
但我们现在是 V1，自 2018 年以来，谷歌、苹果、Mozilla、微软现在正在更紧密地合作。
（WTF .. Facebook 在哪里？）

就个人而言，我更喜欢：

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

因为<blog-post>它将是从这个 lightDOM 在 shadowDOM 中创建内容的主力。

良好的使用属性可以实现出色的 CSS

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

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

你甚至可以用最少的 JS 添加搜索，动态创建样式

添加像 MarkDown 解析器这样的功能是轻而易举的事

不要仅仅因为可以创建 HTML 标签就创建 HTML 标签...

但请记住我所说的关于开发人员建议的内容。

推荐阅读