自定义html属性没有data-*前缀有效属性？

Question

好吧,最近,我发现了这个:https://angularjs.org/

我注意到他们使用自定义属性前缀"ng-"

还有更多,唯一的VALID(我不是在谈论事实,他们仍然工作)使用的前缀是"数据 - ".

那么,有人可以向我解释,这些百万个项目和公司如何使用无效的自定义html元素属性前缀,似乎没有人关心？或者我错过了什么？

我真的很感激一些想法,甚至是信息来源,而不仅仅是"每个人都这样做"和"不要打扰并留下它"这样的文字.

Answer 1

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

原则上，您可以创建所需的任何属性，尽管不能期望浏览器知道如何处理它们。在HTML中都是如此：

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

和在JavaScript中

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

您可以期望CSS认真对待您的自定义属性，只要您使用属性选择器即可：

…[thing] {
    …
}

当然，如果您开始建立自己的属性，则会遇到两个问题：

该data-属性前缀有两个好处：

实际上，data-前缀使您可以通过告诉验证程序忽略该属性，从而使您可以使用其他无效的属性。

这不会解决属性名称竞争的问题，因此您几乎是一个人。但是，通常的做法是至少包括特定于库的前缀。

最后是有效的问题。

如果通过valid，您的意思是它将通过标准（现代）HTML验证器，则答案是只有data-属性才能以这种方式工作。另一方面，如果您希望它能工作，那么只要您不希望浏览器猜测您的意思，CSS和JavaScript都可以很高兴地与其他组成的属性一起工作。

Answer 2

自定义属性必须以data-或x-开头,否则它们无效.这可能会在将来的浏览器中引起问题,HTML验证器会说它们无效.

请注意，某些使用类似方法的js框架-例如，使用其“ v-”属性的Vue js-在页面加载之前会动态删除这些属性（很好，将它们转换为有用的东西），然后浏览器才会显示任何内容，从而使结果html完全有效。我认为Angular也在这样做。浏览器不应该真正关心DOM中未主动包含/显示的html。 (2认同)
我不知道`x-` 前缀。那是真的吗？ (2认同)

Answer 3

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

即使data-带前缀的自定义属性也无效的声明是错误的，请检查此W3C 规范

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

值得注意的是，W3C 官方规范并不是唯一的 HTML 页面构建方式，而是推荐的方式。我敢说，有一些不言而喻的标准，它们在网络上广泛使用，并且被所有主要浏览器所容忍，尽管它们没有在 w3c 规范中提及。根据这篇文章，自定义命名的 html 属性被忽略，但仍然可以访问，因此是一个可行的选择。

恐怕我们脚下没有坚实的基础 - 通过命名您的参数前缀data-，您正在按照推荐的方式做事 - 避免可能的弃用警告或其他问题，如果浏览器将来会更加严格。然而，标准可能会发生变化，并且由于自定义方式命名属性在网络上广泛传播，因此它们本身也可以成为标准。

那么解决办法是什么呢？

如果您确实想data-在中使用自定义的非前缀属性HTML，那么最好对一般浏览器支持进行研究（找到已经这样做并在某些文章中发表了他的研究结果的人），并根据该结果做出决定- 就像任何其他 HTML/CSS/JS 功能一样。