自定义HTML标签被误解了，实际上应该被认为是 * 最佳实践 *。
浏览器将下载并解析具有自定义或 * 未知 * 标记的标记，完全没有问题。浏览器还将使用您提供的CSS规则对其进行样式化。下面是一个示例：

HTML格式

第一个月

CSS

my-alert[status="success"] { 
  color: white;
  background-color: green; 
}

字符串
前端世界为类疯狂（部分原因是旧浏览器不能很好地处理未知标记 *），所以上面的操作通常是这样的：

HTML格式

<div class="alert alert-success">Hello custom tags!</div>个

CSS

.alert.alert-success { 
  color: white;
  background-color: green; 
}

型
两者的工作原理完全相同，但自定义标记的设计与自定义元素规范保持一致，使用熟悉的HTML结构（标记，属性，嵌套），并准备这个小静态警报，以 * 基于标准的向后兼容的方式演变为真正的自定义元素或Web组件。
你可以使用自定义标签做很多事情，同时仍然满足良好HTML的所有要求。例如，这个带有图标的chip元素提供了一个很好的API，并且仅使用CSS就具有良好的语义（想象一下酒店设施的过滤器列表）：

<x-chip role="button" aria-pressed="true" title="Breakfast" aria-label="Breakfast">
  <x-icon name="mug"></x-icon>
</x-chip>
<x-chip role="button" aria-pressed="false" title="Wifi" aria-label="Wifi">
  <x-icon name="wifi"></x-icon>
</x-chip>

型
我编写了TAC CSS方法，用于创建自定义HTML，支持无缝构建简单的CSS组件到完整的Web组件：https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology

• 旧的HTML 2.0规范对于未知标签的容错性不是很好，但值得庆幸的是，在HTML 4.01中有所改变：

为了便于实验和不同版本的HTML实现之间的互操作性，我们推荐以下行为：
如果用户代理遇到它无法识别的元素，它应该尝试呈现元素的内容。如果用户代理遇到它无法识别的属性，它应该忽略整个属性规范（即属性及其值）。如果用户代理遇到它无法识别的属性值，则应使用默认属性值。如果遇到未声明的实体，该实体应被视为字符数据。
参考：https://www.w3.org/TR/html401/appendix/notes.html#notes-invalid-docs

现在创建自定义HTML标签是非常好的，但是，你需要知道如何正确地创建它们，以获得更好的浏览器支持。确保它们具有语义“含义”或“角色”，以获得更好的可读性和可访问性。这在使用Web组件时非常有用。
下面是一篇关于创建自定义html元素的好文章：https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/

要使您的网页有效地被Google索引，遵守某些标准是很重要的，特别是在使用自定义HTML标记时。
此外，还有一个有用的帖子概述了基本的指导原则：18 Things to know before using Custom HTML Tags这些指导原则包括HTML标签的命名约定（避免在开头使用大写字母），以及不像我们在变量命名中那样使用下划线。
虽然自定义HTML标签可能很有用，但我建议在生产环境中部署它们之前要谨慎。确保它们的广泛接受和兼容性以保持网站的有效性和覆盖范围至关重要。