HTML自定义属性优先级

Question

我无法找到data-属性的标准应该被视为主要语法还是次要语法。

也许参考了一些主要框架，例如Angular？

即如果有人同时将my-attr和data-my-attr都指定为一个属性，应首先使用哪个属性？我在任何地方都找不到它。

<div my-attr="123" data-my-attr="456"></div>

如果遇到这样的情况，处理它的标准逻辑是什么？在这种情况下使用哪个值，而忽略哪个值？

---

一点点背景。我编写了一个使用自己的my-attr语法的库，后来我扩展了其支持data-my-attr的合规性，但是我将其添加为辅助语法，这是我不确定的。 / p>

Answer 1

不带前缀data-的自定义属性应被视为无效，因为它不符合标准并且不符合HTML验证程序。

带有-data前缀的

属性应具有优先级，因为它们符合HTML。

自定义数据属性

  

自定义数据属性是没有名称空间的属性，其名称以字符串“ data-”开头，连字符后至少有一个字符，并且与XML兼容，并且在其中不包含任何字符范围从U + 0041到U + 005A（拉丁大写字母A到拉丁大写字母Z）。

来源：https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

---

测试提供的示例

如果您转到https://validator.w3.org并测试示例代码...

<div my-attr="123" data-my-attr="456"></div>

您将得到这个：

  

错误：目前，元素div上不允许使用属性my-attr。

Answer 2

根据我对AngularJS的理解，两者都将具有同等优先级。和两者不能同时使用。您必须选择my-attr或data-my-attr。

<div ng-model="model.first" data-ng-model="model.second">

以上将经历Error: [$compile:multidir]的编译时错误

因此您不能一起使用它们。

在docs中有一个例子清楚地说明了这一点。

有效：

Hello <input ng-model='name'>
Hello <input data-ng-model='name'>

无效 ：（错误：[$ compile：multidir]）

Hello <input ng-model='name' data-ng-model='name'>

Plunker Demo here。