AngularJS 如何摆脱使用自定义 HTML5 元素标签和属性？答案

【问题标题】：How does AngularJS get away with using custom HTML5 element tags and attributes?AngularJS 如何摆脱使用自定义 HTML5 元素标签和属性？
【发布时间】：2013-09-10 23:57:33
【问题描述】：

大多数浏览器似乎允许您创建任何您喜欢的元素标签，并为元素添加任何您喜欢的属性名称。例如：

<!DOCTYPE html>
<html>
<body>
<div my-attribute="has no data- prefix, but seems to behave like an attribute should">
    <br/>
    <hello-world style="display:block;background:#eee">Hello Everybody</hello-world>
    <goodby-world style="background:#faa">Default display is inline</goodbye-world>
</div>
</body>
</html>

以上显示正常。看起来未定义的元素的行为很像跨度。看起来 AngularJS 也大量利用了自定义标签和属性——这在很大程度上取决于它。

但是，据我所知，做这种事情是不行的，除非是带有“data-”前缀的自定义 html5 属性。

所以，我的问题是：组成自己的自定义元素标签和/或属性名称不再是禁忌吗？或者换一种说法，AngularJS 是否依赖非标准的怪癖，这些怪癖并不是 HTML5 规范的一部分，但只是碰巧起作用？谷歌的某个人是否发现了 html5 规范中失传已久的秘密章节？还是我完全误解了什么？

【问题讨论】：

怪癖是 HTML5 规范的一部分，因此所有浏览器都应该以相同的方式进行垃圾处理，这意味着即使像 angular 使用的垃圾 html 在 HTML5 浏览器中也是跨浏览器一致的。如果要验证，请遵循规范。如果您更关心角度特征而不是验证，请使用 angular.如果你想要两者，使用类或数据属性来驱动角度而不是自定义标签和属性。

标签： javascript html angularjs

【解决方案1】：

它不会验证，但会渲染。

HTML5 被设计为非常宽容（与 XHTML 相反）。部分原因是“旧”HTML5 浏览器可以在不破坏页面的情况下允许该版本尚不支持的新元素（以及格式错误的 HTML）。

这当然可以被“利用”来引入自定义标签。

话虽如此 - 您也可以使用 HTML4 来做到这一点。

如 cmets 中所述：您还可以在普通标签中的任何属性前加上 data- 前缀，它会验证。

【讨论】：

我要补充一点，如果您希望页面进行验证，您可以简单地在属性前面加上 data- 并避免使用自定义元素，而是依赖于使用类或属性指令，您可以使用页面验证。最终，如果它渲染/工作，那才是最重要的。有点相关的 IE 兼容性 docs.angularjs.org/guide/ie 和另一个 SO 帖子 stackoverflow.com/questions/16949926/…

【解决方案2】：

来自 W3C 规范：

作者不得使用本规范或 [其他适用规范][1] 不允许的元素、属性或属性值，因为这样做会大大增加该语言未来的扩展难度。

然而，虽然页面正文的初始源（在 Angular 处理 ng-app 元素之前）可能不符合 W3C 标准，但如果您在指令中使用 replace: true，自定义元素将替换为模板 HTML，该模板可以是有效的。因此，在这种情况下，您可以将 angular 元素视为一个占位符，替换为终端 HTML 输出。

【讨论】：

问题是，无论出于何种原因，“替换”已经被弃用了一段时间。

【解决方案3】：

这有点自以为是，但主题也是如此。网络现在就是我们所做的，我们有能力创建/样式/修改非规范元素。 Angular 团队可能并不真正关心规格，它是最前沿的，它们允许你做你想做的事。话虽如此，您可以在 Angular 中使用可验证并符合 HTML5 规范的标记来做任何事情（因为它们都支持它）。

【讨论】：

【解决方案4】：

AngularJS 并不关心，这完全取决于你。如果您希望您的指令与 olds IE 兼容，则需要使用 <div data-hello-world> 而不是 <hello-world> 并将 data- 放在所有自定义属性的前面。

HTML5 仍然不是 100% 的规范，但它正在慢慢成为规范。

【讨论】：

您也可以使用 IEShiv.js 文件并为您自己的元素执行 document.createElement("my-custom-element") 以防止 IE 崩溃（认为它仍然无法验证但 jimmy 破解了玉米...）。 github.com/angular-ui/angular-ui/tree/master/common/ieshiv