HTML5：自定义标签与。班级

Nils 发表于 Dev

尼尔斯

我刚刚再次阅读了有关HTML5-自定义标签的信息，并对此有疑问。

向HTML添加新元素

您可以使用浏览器技巧将任何新元素添加到HTML：本示例添加了一个称为<myHero>HTML的新元素，并为其定义了display>样式：
<!DOCTYPE html>
<html>

<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body>
</html>

对我来说，听起来像那些自定义标签的使用就像类一样。自定义标签的附加价值是什么？是否有任何情况我应该使用自定义标签而不是类？也许使用类总是更好？

我只是觉得HTML5中的所有新功能都有充分的理由，并以某种方式使HTML变得更好。

对我而言，仅使用自定义标签似乎毫无意义，因此我想知道何时使用它们以及为什么使用。

因此，请教我如何正确使用它。

HTML5的“自定义元素”模块使这一想法标准化，从而允许您使用自定义元素：

自定义元素是平台对象，其接口由作者定义。所述接口原型对象一个的定制元素的接口被称为定制元素原型。

所述定制元素类型识别一个定制元件接口，并且是必须的匹配的字符序列的NCName生产，必须包含一个U + 002D连字符号字符，并且不能包含任何大写字母ASCII。

因此，您可以使用<my-hero>，但不能使用<myHero>。

动机

有两个动机推动了本规范的发展：

为Web开发人员提供一种构建自己的功能齐全的DOM元素的方法。尽管使用HTML中的任何标签名称创建DOM元素的可能性很长，但是这些元素的功能不是很明显。通过为Web开发人员提供既可以告知解析器如何正确构造元素又可以对元素的生命周期变化做出反应的方法，该规范消除了当今必须存在的DOM即渲染视图支架的需求。大多数网络框架或库。

合理化平台。该规范确保其所有新功能和特性与当今Web平台的相关部分的工作方式保持一致，以便这些新功能可用于解释现有Web平台功能（如HTML元素）的功能。

大部分的努力都是为了在这两种动机之间找到合适的平衡，这是因为希望这些动机不会相互矛盾，而只是同一大故事的互补部分。例如，尽管该规范的范围目前仅限于由作者创建自定义元素，但其目的是缩短实现更宏伟目标的距离，该目标是将所有HTML，SVG和MathML元素合理化为一个统一的系统。