最近我读到越来越多关于人们在HTML标记中使用自定义属性的文章,主要是为了在javascript代码中嵌入一些额外的数据。

我希望收集一些关于使用自定义属性是否是一种好的实践的反馈,以及有哪些替代方案。

它似乎真的可以简化服务器端和客户端代码,但它也不符合W3C标准。

我们是否应该在web应用中使用自定义HTML属性?为什么或者为什么不呢?

对于那些认为自定义属性是一件好事的人来说:在使用它们时要记住哪些事情?

对于那些认为自定义属性是坏事的人:您使用什么替代方法来完成类似的事情?

更新:我最感兴趣的是各种方法背后的原因,以及为什么一种方法比另一种方法更好。我认为我们都可以想出4-5种不同的方法来完成同样的事情。(隐藏元素,内联脚本,额外的类,从id解析信息,等等)。

更新2:似乎HTML 5数据属性特性在这里有很多支持(我倾向于同意,它看起来是一个可靠的选项)。到目前为止,我还没有看到对这个建议的反驳。使用这种方法有什么问题/陷阱需要担心吗?或者仅仅是对当前W3C规范的“无害”的无效?


当前回答

与自定义属性不生效的答案相反:

自定义属性将生效。

自定义标记也是如此,只要自定义标记是小写的并带有连字符。

在任何验证器中尝试此操作。它会生效。

<!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-开头的属性。只要您的前缀是不寻常的,您就永远不会看到冲突。

其他回答

我一直使用自定义字段,例如<a I ="" ....然后用jquery引用i。无效的html,是的。它工作得很好,是的。

将数据嵌入到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!');

在我看来,自定义属性不应该被使用,因为它们不具有有效性。除此之外,你可以为一个元素定义很多类,比如:

<div class='class1 class2 class3'>
    Lorem ipsum
</div>

规范:创建一个ASP。NET TextBox控件,根据属性“DecimalSeparator”和“ThousandsSeparator”,使用JavaScript动态地将文本自动格式化为数字。 将这些属性从控件转移到JavaScript的一种方法是让控件呈现自定义属性:

<input type="text" id="" decimalseparator="." thousandsseparator="," />

自定义属性可以通过JavaScript轻松访问。虽然使用具有自定义属性的元素的页面不会验证,但该页面的呈现不会受到影响。 我只在希望将简单类型(如字符串和整数)与HTML元素相关联以便与JavaScript一起使用时才使用这种方法。如果我想让HTML元素更容易识别,我将使用class和id属性。

我没有使用自定义属性,因为我输出的是XHTML,因为我希望数据能够被第三方软件机器读懂(不过,如果我愿意,我也可以扩展XHTML模式)。

作为自定义属性的替代品,我发现id和class属性(例如,在其他答案中提到的)足够了。

另外,考虑一下这个:

如果额外的数据既能被人读又能被机器读,那么就需要使用(可见的)HTML标记和文本进行编码,而不是作为自定义属性。 如果它不需要人类可读,那么也许可以使用不可见的HTML标记和文本进行编码。

有些人例外:他们允许自定义属性,在运行时通过Javascript在客户端添加到DOM中。他们认为这是可以的:因为自定义属性只在运行时添加到DOM, HTML不包含自定义属性。