当创建像<input-field>这样的自定义元素时，自定义属性应该仍然使用'data-'前缀还是可以接受直接使用它们?以variation="abc"和data-variation="abc"为例。
如果允许，是否允许重用现有的属性，如type?
另外，在创建元素的对象时像下面这样添加自定义属性是不是不好的做法:
class InputFieldElement extends HTMLElement {
constructor() {
super();
this.customProperty = {data: 123};
}
}
customElements.define('input-field', InputFieldElement);
我知道这些方法现在工作得很好，但问题更多的是，如果它实际上是预期的行为，或者它只是一个奇怪的边缘情况，可以随时停止工作。
三年前我也问过类似的问题。
除了通用属性(例如id,class,title)，您可以自由选择几乎任何您喜欢的属性名称。在某些情况下，甚至重用存在于某些元素上的属性名(如value、disabled等)也是完全有意义的，这样组件消费者就可以像使用现有的HTML元素一样使用你的元素。
记住，这种自由只适用于使用自治自定义元素时。(<foo-bar>)，不扩展内置(<div is="foo-bar">)!
关于你的第二个问题，在构造函数中定义/添加属性也是完全可以的，但是最近对ES标准的添加增加了公共和私有类字段:
class InputFieldElement extends HTMLElement {
customProp = {data: 123}; // public class field
#abc = "Hello"; // only accessible from within this class via this.#abc
}
除了私有成员之外，这个类所做的与您的类完全相同，有效地节省了对constructor的需要。请注意，this在为私有或公共类字段赋值时还不可用，这意味着您不能以这种方式设置计算属性。
关于您要求type的具体问题，拥有该属性通常是不良类设计的指标(这对于HTMLInputElement来说是正确的，例如，导致text输入具有使用和无意义的checked属性，以及具有readOnly属性的复选框(也不会做任何事情))，但由于web竞争不能再更改。