自定义HTML元素的属性

2018-06-08 05:29:19

在使用Web组件中的自定义HTML元素时，我还应该使用前缀data命名自定义属性吗？

例如：

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

一般来说，自定义元素和预定义元素之间没有区别。您可以使用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 。所以，属性命名规则没有改变。

请注意，图书馆，如聚合物，可能会增加额外的属性处理; 以上仅适用于纯Web组件。

不，这不是必要的。

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

Web组件是自定义元素。他们没有定义的一组属性，你自己定义它们。你是否使用data-属性完全取决于你，但你不需要。你的组件不能失效，因为它没有有效的定义。

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

链接地址: http://www.djcxy.com/p/24957.html

上一篇: Attributes on custom HTML elements

下一篇: How to use WebRTC + Pubnub Api for video chat client in Native android app