自定义HTML元素的属性

Question

在Web组件中使用自定义HTML元素时,我是否仍应使用前缀命名自定义属性data？

例如:

<!-- Should form be data-form? -->
<my-button form="foo">click me</my-button>

Answer 1

不，那没有必要。

现有的 HTML 元素具有一组定义的属性，这意味着您只需添加任何属性即可使 HTML 无效。通过引入data-属性，可以扩展现有元素而不会使它们失效。

Web 组件是自定义元素。它们没有定义的属性集，您可以自己定义它们。是否使用data-属性完全取决于您，但也不是必须的。您的组件不会变得无效，因为没有有效的定义。

如果您关心语义/有效的 HTML，这个答案可能也与您相关：自定义元素是否有效 HTML5？。简而言之：在组件名称中使用破折号以确保它被识别为有效的 HTML。

Answer 2

一般来说，自定义元素和预定义元素没有区别。您可以使用 创建您选择的元素并将document.createElement其注册document.registerElement。结果将是：

\n\n

console.log(document.createElement(\'my-button\').constructor);\n//\xe2\x87\x92 function HTMLElement() { [native code] }\nconsole.log(document.registerElement(\'my-button\'));\n//\xe2\x87\x92 function my-button() { [native code] }\nconsole.log(document.createElement(\'my-button\').constructor);\n//\xe2\x87\x92 function my-button() { [native code] }\n

\n\n

正如您所看到的，一旦注册，该元素就会被授予它\xe2\x80\x99 自己的构造函数。这为组件提供了以它自己的方式运行的能力。但：

\n\n

console.log(document.createElement(\'my-button\').__proto__.__proto__);\n//\xe2\x87\x92 HTMLElement\n

\n\n

依然是一片美好的古老平原HTMLElement。因此，属性命名规则没有改变。

\n\n

请注意，像聚合物这样的库可能会添加额外的属性处理；以上仅适用于普通 Web 组件。

\n