0

在设计自定义元素时，我了解模板在性能方面的优势，但对于仅在一个元素中使用的结构，我很难理解在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) 保留 using 的优点createElement和 (b) 有助于防止通过在元素定义范围之外定义模板而引入的潜在封装问题时？

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

4

1 回答 1

0

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

我会做：

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>

于 2021-07-30T07:32:27.233 回答