在构造函数中构建自定义元素的缺点？

Question

在设计自定义元素时，我了解模板在性能方面的优势，但对于仅在一个元素中使用的结构，我很难理解在元素类定义本身的 constructor() 中构建 html 的缺点.

换句话说，这样做有什么缺点：

const myTemplate = document.createElement("template");
myTemplate.innerHTML = `<p>my text</p>`;

customElements.define( 'my-elem', class extends HTMLElement {

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(myTemplate.content.cloneNode(true));
  }

})

在此：

customElements.define( 'my-elem', class extends HTMLElement {

  constructor() {
    super();

    let myP = document.createElement("p");
    let myText = document.createTextNode("my text");
    myP.appendChild(myText);

    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(myP);
  }

})

...当后一个选项 (a) 保留使用 createElement 的优势，并且 (b) 有助于防止在元素定义范围之外定义模板时引入的潜在封装问题？

我还知道，我可以使用createElement 而不是上面示例中的innerHTML 构建模板，但这有可能引入更多在元素定义范围之外定义的变量。

Answer 1

这是一个微妙的差异，归结为需求和/或团队/个人偏好。

我愿意：

customElements.define( 'my-elem', class extends HTMLElement {
  constructor() {
    let myP = document.createElement("p");
    let myText = document.createTextNode("my text");
    myP.append(myText);
    // MDN docs are wrong, you can put code *before* super
    super() // create and return 'this'
         // create and return this.shadowRoot
        .attachShadow({ mode: "open" }) 
        .append(myP);
  }
})
customElements.define( 'my-elem2', class extends HTMLElement {
  constructor() {
    super()
        .attachShadow({ mode: "open" })
        .innerHTML = "Hello! Component";
  }
})

<my-elem></my-elem>
<my-elem2></my-elem2>