Question

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

但我想知道如果我将自定义元素和自定义属性与当前的html规范（html 5）一起使用会发生什么。

示例

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

在视觉上我看到任何浏览器都没有问题。 js的作品：

x{
  color: red;
}

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

css也有效：

<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">

Answer 1

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

这一直被列为XML / XHTML的缺点之一，但在这里我们又回到了我们本来应该放在首位的地方，在网络上使用XML ......但我离题了。

Answer 2

可能的风险包括

向后兼容性。特别是，IE8及以下版本无法理解您的标记，您必须记住为所有新元素编写document.createElement('x')。
语义 - 让你的html机器可读不是你的目标，但有时可能需要以适度有用的方式解析它。
便携性＆amp;维护 - 有很多当前的html标签，几乎可以肯定你想要它们做什么。在某些时候，其他人可能不得不照顾你的代码。让他们花时间学习所有新标签的用途是否有什么好处？
搜索引擎优化 - 不要因为你可以做的事情而承担惩罚的风险..

为了完整起见，有充分理由这样做。如果您可以演示新标记改进您网页的语义（您的示例＆＃39; x＆＃39;显然不是和您可以认为在某些用例中，您的页面将由您自己的进程进行机器解析，然后继续进行。

Answer 3

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

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

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

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