没有data-*前缀的自定义HTML属性是否是有效属性？

Question

43

好的，最近我发现了这个链接： https://angularjs.org/ 我注意到他们使用了自定义属性前缀"ng-"

文章中提到，例如： http://html5doctor.com/html5-custom-data-attributes/ 甚至在stackoverflow上也有： https://dev59.com/gHPYa4cB1Zd3GeqPhEgZ#17091848 还有很多类似的文章，但是唯一有效（我并不是说它们不起作用）的前缀是"data-"。

那么，有人能解释一下吗？为什么这些百万级的项目和公司都使用无效的前缀来自定义HTML元素属性，而似乎没有人在意呢？或者我是哪里出了问题？

我真的很希望得到一些想法，甚至是一些信息来源，而不仅仅是像“每个人都这样做”和“别管它，随它去”的文字。

- ExClouds

2

说实话，还有什么其他的答案呢？没有 data-* 前缀的自定义属性都是非标准的。 - BoltClock

1

它们不是“无效的”，只是不符合标准。 - jofftiquez

3个回答

7

自定义属性必须以data-或x-开头，否则将无效。这可能会在未来的浏览器中引起问题，并且HTML验证程序将显示它们无效。请参见：ng-app和data-ng-app有什么区别？和：http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes。

- Richard

所以，我是对的，毕竟它们是无效的，对吧？ - ExClouds

2

请注意，一些使用类似方法的JS框架 - 例如Vue.js使用它们的“v-”属性 - 在页面加载之前动态删除这些属性（将它们转换为有用的内容），因此使得生成的HTML完全有效。我认为Angular也是这样做的。浏览器不应该真正关心没有被主动包含/显示在DOM中的HTML。 - Arthur

3

我之前不知道 x- 前缀，这是真的吗？ - Manngo

1

@Manngo 我认为 x- 前缀是无效的。当我搜索时，我找不到任何关于这个的信息。当我阅读这篇文章时，我认为发帖人的意思是 x 是 W3C 在规范中定义为可接受的任意前缀，例如 data-。然而，措辞暗示 x- 是用户定义的属性。 - Dave F

5

官方的W3C验证器不认为ng-customattr、x-customattr属性或customattr是有效的。

有些说法认为，即使以data-为前缀的自定义属性也是无效的，这是错误的，请查看W3C规范

然而，值得注意的是，像Laravel的Dusk鼓励开发人员使用自定义的非data-前缀属性。

值得注意的是，官方的W3C规范并不是构建HTML页面的唯一方式，而是推荐的方式。我敢说，在网络上有许多不成文的标准，虽然它们没有在W3C规范中提到，但却被所有主要浏览器广泛使用和容忍。根据article，自定义命名的html属性被忽略，但仍然可以访问，因此是一个可行的选项。

我担心我们脚下没有坚实的基础-通过以data-为前缀命名您的参数，您正在按照推荐的方式处理事情-避免可能的弃用警告或其他问题，如果浏览器将来变得更加严格。然而，标准可能会改变，由于自定义命名属性在网络上广泛存在，它们可以成为标准本身。

那么解决方案是什么？

如果您真的想在HTML中使用自定义的非data-前缀属性，那么最好对一般浏览器支持进行研究（或者找到已经发布了这方面研究结果的人），并根据此做出决定-就像处理任何其他HTML/CSS/JS功能一样。

- Fusion

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manngo · Accepted Answer

这是一个旧问题，但下面的内容可能会有所帮助。

原则上，您可以创建任何属性，但不能期望浏览器知道如何处理它们。这在HTML中同样适用：

<p thing="whatever" … </p>

并且在 JavaScript 中

//  p = some element
p.setAttribute('thing','whatever');

只要您使用属性选择器，就可以确保CSS会认真处理您的自定义属性：

…[thing] {
    …
}

当然，如果你开始制作自己的属性，会遇到三个问题：

data- 属性前缀有三个好处：

有效地，data- 前缀允许您使用一个否则无效的属性，告诉验证器忽略它。

这并不能解决竞争属性名称的问题，所以你基本上只能靠自己。但是，通常习惯于至少包括特定于库的前缀。

最后是关于“有效”的问题。

如果您说“有效”，指的是它是否通过标准（现代）HTML验证器，则答案仅为 data- 属性。另一方面，如果您想知道它是否有效，则CSS和JavaScript都将愉快地使用其他编写的属性，只要您不指望浏览器猜出您的意图。