以编程方式创建HTMLElement时可以在构造函数之前设置属性吗？

Question

我有这样的东西...

class Thing extends HTMLElement{
  constructor(){
    super();
    this.selected = this.getAttribute('selected');
    ...
  }
}

创建类似<my-thing selected="thing"></my-thing>的元素时，这很好用。现在，我想注入一些东西。我可以这样做...

this.things.forEach((thing)=>{
  tabString += `<my-thing selected=${thing.selected}></my-thing>`;
});

然后注入内部HTML，但这似乎很hack。我真正想做的是这样的...

this.things.forEach((thing)=>{
  this.element.appendChild(new Thing());
});

但是我该如何设置selected？

我仍然仍然需要能够将组件作为普通标记添加到HTML中，并且它应该以任何一种方式处理属性。

Answer 1

一种方法是在构造函数中传递selected：

class Thing extends HTMLElement{
  constructor(selected){
    super();
    this.selected = selected || this.getAttribute('selected');
    ...
  }
}