在 HTML5 中使用自定义 HTML 元素和属性的具体风险是什么？答案

【问题标题】：What are the concrete risks of using custom HTML elements and attributes in HTML5?在 HTML5 中使用自定义 HTML 元素和属性的具体风险是什么？
【发布时间】：2015-08-18 20:52:58
【问题描述】：

我的问题与此海报的问题类似：使用自定义 HTML 属性的具体风险是什么？

但我想知道如果我在当前 html 规范 (html 5) 中使用自定义元素和自定义属性会发生什么。

例子

<x a="5"> abc </x>

从视觉上看，我在任何浏览器中都没有发现任何问题。 js 工作：

 x = document.getElementsByTagName('x');
 alert('x has attribute a=' + x[0].getAttribute('a'));

css 也可以：

x{
  color: red;
}

x[a]{
  text-decoration:underline;
}

【问题讨论】：

查看这个答案，了解使用 html 自定义元素有哪些风险http://stackoverflow.com/questions/1928369/what-are-the-concrete-risks-of-using-custom-html-attributes and standards in html here
派对有点晚了，但对于未来的访客；请记住，自定义 HTML 元素的名称中必须至少有一个破折号； <x> 不是有效元素。像<x-men> 这样的东西是有效的。

标签： html browser cross-browser

【解决方案1】：

可能的风险包括

向后兼容性。特别是 IE8 及以下版本无法识别您的标签，您必须记住为所有新元素写 document.createElement('x')。
语义 - 让您的 html 机器可读可能不是您的目标，但可能会有一段时间需要以适度有用的方式对其进行解析。
可移植性和维护 - 有很多当前的 html 标记几乎可以肯定地执行您希望它们执行的操作。在某些时候，其他人可能需要照顾您的代码。让他们花时间了解所有新标签的用途有什么好处吗？
搜索引擎优化 - 不要仅仅因为这是你可以做的事情就冒着受到惩罚的风险..

为了完整起见，这样做是有正当理由的。如果你能证明你的新标签改进了你的页面的语义（你的'x'的例子显然没有）并且你可以想到一些用例，你的页面将由您自己的进程进行机器解析，然后继续执行。

【讨论】：

【解决方案2】：

我能想到的唯一问题是其他应用程序（包括搜索引擎）无法识别您的自定义元素和属性，因此他们不知道要查找什么或如何使用它们，这对于搜索引擎优化。其他试图访问您的内容的应用程序，包括 RESTful 应用程序，如果您不告诉应用程序开发人员，也不会知道。

这一直被列为 XML/XHTML 的缺点之一，但我们又来了，又回到了我们最初应该回到的地方，在 Web 上使用 XML……但我离题了。

【讨论】：

【解决方案3】：

过去不赞成自定义元素的主要原因是浏览器不知道如何处理它们，也没有标准化的方式告诉它们它们是什么。

在不遵循标准化的情况下在 HTML5 中使用自定义 HTML 元素有哪些风险？

浏览器会以不同的方式处理它们：
- 某些浏览器可能会忽略这些元素并假装它们不存在； <x>，我不知道<x> 是什么，让我们摆脱它。
- 某些浏览器可能会尝试将元素转换为其他内容；例如，定义一个 <tab> 元素，浏览器可能会认为您拼错了 <table>。
您必须处理该元素应该在各种设备上执行的操作；仅仅因为它可以在您的 PC 上运行并不意味着它可以在您的手机、电视、电子阅读器...或您的 WiFi 冰箱...

好消息是正在编写一些新文档，以允许开发人员以标准化方式定义自己的自定义元素。 Custom Elements，正如它的标题一样，为开发人员和浏览器供应商提供了诀窍，使开发人员能够以一种适用于所有支持浏览器的方式来实现和编写自定义元素的脚本......无论如何，这就是想法。

【讨论】：