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

Question

我了解模板在设计自定义元素时在性能方面的优势，但是对于仅在一个元素中使用的结构，我很难理解在 [=12] 中构建 html 的缺点=] 元素 class 定义本身。

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

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

这是一个细微的差别，归结为要求 and/or team/personal 偏好。

我会做：

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>

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

Disadvantage of building a custom element within the constructor?

html

javascript

web-component

custom-element

html-templates