为自定义元素创建自定义 HTML 属性是一种好习惯吗？

Question

在创建像 <input-field> 这样的自定义元素时，自定义属性是否仍应使用 'data-' 前缀，还是仅按原样使用它们是否可以接受？例如，基本上使用 variation="abc" 与 data-variation="abc"。
如果允许，是否允许重新使用 type 等现有属性？

此外，在创建过程中向元素的对象添加自定义属性是否是一种不好的做法，如下所示：

class InputFieldElement extends HTMLElement {
    constructor() {
        super();

        this.customProperty = {data: 123};
    }
}
customElements.define('input-field', InputFieldElement);

我知道这些方法现在工作得很好，但问题是它是否真的是预期的行为，或者它是否只是一个可能随时停止工作的奇怪的边缘情况。

Answer 1

3年多前我问过

您几乎可以自由选择任何您喜欢的属性名称，通用属性除外（例如 id、class、title）。在某些情况下，甚至某些元素上存在的 re-using 属性名称（例如 value、disabled 等）也完全有意义，因此组件使用者可以像使用您的元素一样使用它们HTML 个元素。

请记住，这种自由仅在使用 自主自定义元素时适用 (<foo-bar>)，不适用于扩展 built-ins (<div is="foo-bar">)!

关于你的第二个问题，构造函数中的 define/add 属性也完全没问题，但最近对 ES 标准的添加增加了 public and private class fields:

class InputFieldElement extends HTMLElement {
    customProp = {data: 123}; // public class field
    #abc = "Hello"; // only accessible from within this class via this.#abc
}

除私有成员外，此 class 与您的 class 完全相同，有效地节省了您对 constructor 的需求。请注意，在为私有或 public class 字段赋值时，this 尚不可用，这意味着您无法以这种方式设置计算属性。

关于您要求 type 的具体问题，具有该属性通常表明 class 设计不当（这对于 HTMLInputElement 是正确的，例如，导致 text 输入和无意义的 checked 属性，以及具有 readOnly 属性的复选框（也不会做任何事情）），但不能改变任何更多是由于网络兼容。

为自定义元素创建自定义 HTML 属性是一种好习惯吗？

Is it good practice to create custom HTML attributes for custom elements?

javascript

html

attributes

custom-element