我什么时候应该在构造函数或 connectedCallback 中应用模板

Question

我什么时候应该在 constructor 或 connectedCallback 中应用模板？当我在回调中这样做时，有时 attributeChangedCallback 之前被调用，我无法查询元素。

export class TestElement extends HTMLElement {
  constructor() {
    super();
    //here ?
  }

  connectedCallback() {
    //here ?
  }
}

我想知道它在哪里以及为什么更好。

这是模板应用代码的片段

let t = document.createElement('template');
t.innerHTML = require('template.html');
this.appendChild(t.content.cloneNode(true));

Answer 1

如果您不使用 Shadow DOM，则不应在 constructor() 回调中插入模板。

因此您应该仅将其附加到 connectedCallback()。

无论如何，attributeChangedCallback() 可以在上述回调之前或之后调用，具体取决于自定义元素的使用方式。所以你应该总是在尝试查询一些内部元素之前进行测试。

When should I apply template in constructor or connectedCallback