WebComponent - shadow DOM 和 append on connectedCallback 之间的区别

Question

在 WebComponenet 的上下文中，使用 connectedCallback() 方法附加元素和使用影子 DOM 有什么区别？

带有阴影 DOM 的示例：

class MyWebComponent extends HTMLElement {
 constructor() {
          super();
          const shadow = this.attachShadow({mode: 'open'});
          shadow.innerHTML = 'Hello, World!';
  }
}
customElements.define('my-web-component', MyWebComponent);

使用 connectedCallback() 方法的示例：

class MyWebComponent extends HTMLElement {
 connectedCallback() {
    const template = document.createElement('template');
    template.innerHTML = 'Hello, World!';
    this.append(template.content.cloneNode(true));
 }
}
customElements.define('my-web-component', MyWebComponent);

结果一模一样，想多了解一下两者的区别