不使用自定义 HTML 标签的原因是什么？答案

【问题标题】：What are the reasons NOT to use custom HTML tags?不使用自定义 HTML 标签的原因是什么？
【发布时间】：2014-12-29 23:21:21
【问题描述】：

鉴于当前的 HTML5 specs 允许 creating custom HTML elements（只要它们的名称包含破折号），以及 Web 组件似乎是一个将继续存在的特性这一事实，我想知道为什么要创建你的自己的自定义 HTML 元素不受欢迎？

请注意，我不是在问是否使用 Web 组件——它仍然是一个移动的目标，即使使用像 Polymer 这样的优秀 polyfill 可能还没有准备好投入生产。我问的是如何创建您自己的自定义 HTML 标记并对其进行样式设置，而无需将任何 JS API 附加到它们。

【问题讨论】：

可能与stackoverflow.com/questions/18177472/…相同
@obiNullPoiиteяkenobi 不是骗子。这里的问题是关于合法和有效的 HTML5 自定义元素（它们的用法在规范中定义）。另一个问题及其答案没有解决这个问题。
只是放点糖：使用自定义标签的原因是什么？
每个人都有自己的理由。我的问题是要找出使用它们的真正缺点。一开始确实感觉很奇怪，这就是为什么大多数人会犹豫实施它们，但除此之外？

【解决方案1】：

简短回答：我没有听到任何非常有说服力的理由来避免它们。

但是，以下是我听到的一些反复出现的论点：

在旧版 IE 中不起作用（document.createElement("my-tag"); 应该可以解决这个问题）。
全局命名空间冲突（同样适用于类名和一般自定义元素）。
CSS 选择器性能（哦，这只是您最不应该担心的事情）。
功能、含义和表示分离。这实际上是我听到的唯一一个论点，即恕我直言有任何有效的依据。你当然最好使用语义 HTML（搜索引擎和所有这些），但如果你打算使用 div 否则，我不明白为什么你不能使用自定义标签。

【讨论】：

自定义标签实际上不会有助于更好地分离功能和演示吗？您最终会得到一个已经传达其功能的元素名称，而不是具有单独定义表示和功能的类的 div，然后只需添加表示类，反之亦然？
视情况而定。我发现随着项目变得越来越大，当您的样式与 DOM 结构没有任何关系时，包含更改会更容易。您可以拥有两种模式对话框，它们在技术上都是modal-dialog，但在不同的上下文中使用，并且您不希望改变一个人的风格影响另一个人。所以我个人喜欢用类来做样式，尽量避免样式依赖 DOM 结构，反之亦然。我强烈推荐阅读cssguidelin.es，它有很多关于这方面的优点。
感谢您的链接！虽然我不提倡使用 DOM 结构作为确定元素的表示或功能的主要方式，但我相信某些将父类耦合到其子布局流的方式，对代码的可读性和易用性非常有益。视情况而定。
没错。这些东西不是非黑即白的。如果用例足够简单，我通常只选择样式标签。

【解决方案2】：

反对自定义标签的理由之一是它们与屏幕阅读器的隐含不兼容。这个问题可以通过WAI-ARIA attributes解决。

存在issue in IE11，如果在表格单元格中插入不带显示属性的自定义元素，则会破坏表格布局。 Check the plunker code。因此，显式声明所有新元素是最安全的，例如：

new-element {
    display: block;
}

【讨论】：