我应该何时在构造函数或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()可以在上述回调之前或之后调用，具体取决于您的自定义元素的使用方式。因此，在尝试查询某些内部元素之前，应始终进行测试。