自定义HTML元素上的属性

Question

当使用Web组件中的自定义HTML元素时，我是否仍然应该使用前缀 data 来命名自定义属性？

例如：

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

- Ben Aston

---

你在谈论语义化HTML？ - Guilherme Nascimento

我在谈论HTML5 Web组件。 - Ben Aston

抱歉，我不理解。+1 - Guilherme Nascimento

Answer 1

不需要这样做。 现有的HTML元素都有一组定义好的属性，这意味着您只要添加任何属性就会使HTML无效。通过引入"data-"属性，可以在不使其无效的情况下扩展现有元素。 Web组件是自定义元素。它们没有定义好的属性，您需要自己定义。是否使用"data-"属性完全由您决定，但您并不需要这样做。您的组件不会因为没有定义而变得无效。 如果您关心语义化/有效的HTML，那么这个答案也可能与您相关：自定义元素是否有效的HTML5？简而言之：在组件名称中使用破折号以确保其被视为有效的HTML。

- Stephan Muller

---

但是，如果我使用原型继承，将my-button组件从HTMLButtonElement继承，表单属性将具有预定义的含义，即使在我的自定义元素中也是如此。这样正确吗？ - Ben Aston

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。因此，属性命名规则没有改变。

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

- Aleksei Matiushkin