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，这个答案也可能与您相关：Are custom elements valid HTML5?。简而言之：在组件名称中使用短划线以确保它被选为有效的HTML。

Answer 2

通常，自定义元素和预定义元素之间没有区别。您可以使用document.createElement创建自己选择的元素，并将其注册到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。因此，属性命名规则没有改变。

请注意，库，如聚合物，可能会添加额外的属性处理;以上情况仅适用于普通网络组件。

自定义HTML元素的属性

2 个答案: