时间戳

首页 > 解决方案 > HTML 自定义属性优先级

javascript - HTML 自定义属性优先级

问题描述

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

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

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

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

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

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

标签： javascripthtmldom

解决方案

没有前缀的自定义属性data-应该被认为是invalid，因为不遵循标准并且不符合 HTML 验证器。

-data考虑到它们是 HTML 兼容的，带有前缀的属性应该具有 priority 。

自定义数据属性

自定义数据属性是无命名空间中的属性，其名称以字符串“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。

推荐阅读