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

Question

哦，最近，我发现了这个：https://angularjs.org/

我注意到他们使用自定义属性前缀＆＃34; ng - ＆＃34;

来自文章，例如： http://html5doctor.com/html5-custom-data-attributes/

甚至stackoverflow： https://stackoverflow.com/a/17091848/2803917

还有更多，唯一有效的（我不是在谈论事实，他们无论如何都要工作）使用的前缀是＆＃34;数据 - ＆＃34;。

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

我真的很感激一些想法，甚至是信息来源，而不仅仅是像＃34;每个人都这样做的文本＆＃34;并且不要打扰并离开它＆＃34;。

Answer 1

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

请参阅：What is the difference between ng-app and data-ng-app?

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

Answer 2

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

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

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

和JavaScript

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

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

…[thing] {
    …
}

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

• HTML验证程序将不知道您的新属性是故意的还是错误的，并且会假定它是不正确的
• 您正在与其他也构成自己属性的代码竞争

data-属性前缀具有两个优点：

• 出于验证目的，HTML验证器将忽略该属性
• JavaScript会将这些属性收集到一个特殊的data对象中，以方便访问

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

这不会解决属性名称竞争的问题，因此您几乎可以完全依靠自己。但是，通常的做法是至少包含特定于库的前缀。

最后是有效的问题。

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

Answer 3

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

声明，即使data-前缀的自定义属性也是无效的，请选中此W3C specification

但是，值得注意的是，像Laravel的Dusk encourage developers这样的项目使用自定义的，非data-前缀的属性。

值得注意的是，官方的W3C规范不是构建HTML页面的专有方法，而是推荐的规范。我敢说，有一些不言而喻的标准，尽管在w3c规范中没有提及，但这些标准已在Web上广泛使用，但被所有主要的浏览器所接受。根据此article，自定义命名的html属性被忽略，但仍可访问，因此是可行的选择。

恐怕我们的脚下没有牢固的基础-通过用data-开头的参数命名，您正在以推荐的方式进行操作-避免可能的过时警告或其他问题，如果将来浏览器会更多严格。但是标准可以更改，并且由于自定义方式命名的属性在Web上很普遍，因此它们可以自己成为标准。

那怎么解决？

如果您真的想在data-中使用自定义的，非HTML前缀的属性，那么最好对通用浏览器支持进行研究（找到已经这样做并发表了研究成果的人结果显示在某篇文章中），并以此为基础做出决定-就像使用其他任何HTML / CSS / JS功能一样。