问题描述
在设计自定义元素时，我了解模板在性能方面的优势，但对于仅在一个元素中使用的结构，我很难理解在元素类的 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 构建模板，但这有可能引入更多在元素定义范围之外定义的变量.
解决方法
这是一个细微的差别，归结为需求和/或团队/个人偏好。
我会这样做：
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>