自定义 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- 属性完全取决于您，但您不必这样做。您的组件不能变为无效，因为没有对其有效的定义。

如果您关心 semantic/valid HTML，这个答案可能也与您相关：Are custom elements valid HTML5?。简而言之：在您的组件名称中使用破折号以确保它被认为是有效的 HTML.

Answer 2

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

console.log(document.createElement('my-button').constructor);
//⇒ function HTMLElement() { [native code] }
console.log(document.registerElement('my-button'));
//⇒ function my-button() { [native code] }
console.log(document.createElement('my-button').constructor);
//⇒ function my-button() { [native code] }

如您所见，一旦注册，该元素就会获得自己的构造函数。这为组件提供了以自己的方式运行的能力。但是：

console.log(document.createElement('my-button').__proto__.__proto__);
//⇒ HTMLElement

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

请注意，像 polymer 这样的库可能会添加额外的属性处理；以上仅适用于纯网络组件。

自定义 HTML 元素的属性

Attributes on custom HTML elements

html

web-component