最近我读到越来越多关于人们在HTML标记中使用自定义属性的文章，主要是为了在javascript代码中嵌入一些额外的数据。
我希望收集一些关于使用自定义属性是否是一种好的实践的反馈，以及有哪些替代方案。
它似乎真的可以简化服务器端和客户端代码，但它也不符合W3C标准。
我们是否应该在web应用中使用自定义HTML属性?为什么或者为什么不呢?
对于那些认为自定义属性是一件好事的人来说:在使用它们时要记住哪些事情?
对于那些认为自定义属性是坏事的人:您使用什么替代方法来完成类似的事情?
更新:我最感兴趣的是各种方法背后的原因，以及为什么一种方法比另一种方法更好。我认为我们都可以想出4-5种不同的方法来完成同样的事情。(隐藏元素，内联脚本，额外的类，从id解析信息，等等)。
更新2:似乎HTML 5数据属性特性在这里有很多支持(我倾向于同意，它看起来是一个可靠的选项)。到目前为止，我还没有看到对这个建议的反驳。使用这种方法有什么问题/陷阱需要担心吗?或者仅仅是对当前W3C规范的“无害”的无效?
当前回答
对于复杂的web应用程序，我将自定义属性放在所有地方。
对于更多面向公众的页面，我使用“rel”属性，并将我所有的数据转储为JSON，然后用MooTools或jQuery解码:
<a rel="{color:red, awesome:true, food: tacos}">blah</a>
我试图坚持HTML 5数据属性最近只是“准备”，但它还没有自然地到来。
其他回答
将数据嵌入到dom中并使用jQuery的元数据。
所有好的插件都支持元数据插件(允许每个标签选项)。
它还允许无限复杂的数据/数据结构以及键值对。
<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>
OR
<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>
OR
<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>
然后像这样获取数据:
var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');
规范:创建一个ASP。NET TextBox控件，根据属性“DecimalSeparator”和“ThousandsSeparator”，使用JavaScript动态地将文本自动格式化为数字。 将这些属性从控件转移到JavaScript的一种方法是让控件呈现自定义属性:
<input type="text" id="" decimalseparator="." thousandsseparator="," />
自定义属性可以通过JavaScript轻松访问。虽然使用具有自定义属性的元素的页面不会验证，但该页面的呈现不会受到影响。 我只在希望将简单类型(如字符串和整数)与HTML元素相关联以便与JavaScript一起使用时才使用这种方法。如果我想让HTML元素更容易识别，我将使用class和id属性。
如果为页面指定模式，则可以创建任何属性。
例如:
Addthis
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>
Facebook(连标签)
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
我认为使用现有的XHTML特性而不破坏任何东西或扩展名称空间没有问题。让我们来看一个小例子:
<div id="some_content">
<p>Hi!</p>
</div>
如何在没有附加属性的情况下向some_content添加附加信息?像下面这样添加另一个标签怎么样?
<div id="some_content">
<div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
<p>Hi!</p>
</div>
它通过您选择的定义良好的id/扩展名“_extended”及其在层次结构中的位置来保持关系。我经常将这种方法与jQuery一起使用，而不是实际使用Ajax之类的技术。
与自定义属性不生效的答案相反:
自定义属性将生效。
自定义标记也是如此，只要自定义标记是小写的并带有连字符。
在任何验证器中尝试此操作。它会生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Test</title>
</head>
<body>
<dog-cat PIANO="yellow">test</dog-cat>
</body>
</html>
一些验证器:
https://appdevtools.com/html-validator
https://www.freeformatter.com/html-validator.html
https://validator.w3.org/nu/
问题是:安全吗?它稍后会破裂吗?
自定义标记
不存在连字符标记。我相信W3C永远不会使用连字符标记。如果他们这样做了，只要您使用不常见的前缀，您就永远不会看到冲突。如:< johny-mytag >。
自定义属性
有连字符的HTML属性。但是HTML规范承诺永远不会使用以data-开头的属性。因此data-myattrib是安全的。但是，我相信W3C永远不会引入任何以johny-开头的属性。只要您的前缀是不寻常的，您就永远不会看到冲突。
