HTML自定义属性优先级

Question

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

也许可以参考一些主要的框架，比如Angular？

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

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

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

---

一点上下文。我写了一个库，它使用了自己的my-attr语法，后来我对其进行了扩展，以支持data-my-attr以实现合规性，但我将其作为辅助语法添加，这是我不确定的。

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-具有数据属性的自定义不可见数据

---

测试提供的示例

如果你去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]的编译时错误

所以您不能将它们一起使用。

从文档中可以清楚地看出这一点。

有效：

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

无效：(错误：[$compile:multer](

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

Plunker演示在这里。