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

【问题标题】：When should I apply template in constructor or connectedCallback我什么时候应该在构造函数或 connectedCallback 中应用模板
【发布时间】：2017-05-12 06:54:37
【问题描述】：

我应该什么时候在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));

【问题讨论】：

标签： javascript web-component custom-element html5-template

【解决方案1】：

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

因此你应该只将它附加到connectedCallback()。

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

【讨论】：

当我使用 shadow DOM 时会怎样？那么在构造函数中这样做会更好吗？创建 shadow dom 怎么样？我应该在构造函数还是连接回调中做？
你不能在构造函数中访问/修改普通的DOM，但是你可以在构造函数中附加一个影子DOM（和里面的模板）。