WebComponent技术问询：connectedCallback与Shadow DOM挂载元素的差异

你给出的两个示例呈现效果一致，但二者在封装性、样式隔离、生命周期、访问控制等核心层面有本质区别，具体如下：

1. DOM 树隔离性 #

• Shadow DOM 会为组件创建一个独立的、封闭的子DOM树（Shadow Root），这个子树和主文档的DOM树完全分离。主文档的JS无法直接访问Shadow内部的元素（除非attachShadow时指定mode: 'open'）。
  比如你用Shadow DOM的示例，主文档执行document.querySelector('my-web-component').querySelector('*')会返回null，因为内部元素不在主DOM树中。
• 而connectedCallback直接挂载的元素属于主DOM树的一部分，全局JS可以随意通过querySelector、getElementById等方法获取并修改这些元素，没有隔离性。

2. 样式作用域隔离 #

• Shadow DOM 自带原生样式隔离：内部定义的CSS规则只会作用于Shadow内部的元素，不会污染主文档或其他组件；主文档的CSS也无法渗透到Shadow内部（仅能通过:host伪类或CSS变量对组件本身做样式控制）。
  比如在Shadow内部写<style>div { color: blue; }</style>，只会改变组件内的div颜色，主文档的div不受影响。
• connectedCallback挂载的元素没有样式隔离，组件内的CSS会全局生效。比如你在模板里写<style>div { color: blue; }</style>，主文档里所有div都会变成蓝色，很容易引发样式冲突。

3. 生命周期执行时机 #

• Shadow DOM 的初始化（attachShadow）通常在constructor中完成，此时组件还未挂载到主DOM树，只能做内部结构的初始化，无法访问组件的DOM上下文（比如父元素、尺寸、位置等）。
• connectedCallback是组件成功挂载到主DOM树后才触发的钩子，此时可以安全访问组件的DOM上下文，比如获取组件的offsetWidth、监听父元素变化等。

4. 外部访问控制 #

• Shadow DOM 通过mode参数可以精确控制外部访问权限：
  • mode: 'open'：外部可以通过element.shadowRoot获取Shadow Root，进而访问内部DOM；
  • mode: 'closed'：外部无法获取Shadow Root，完全无法访问组件内部DOM，封装性极强。
• connectedCallback挂载的元素没有任何访问限制，外部JS可以随意修改组件的内部结构和内容，封装性很差。

5. 组件复用性与维护成本 #

• Shadow DOM 天生适合组件复用，因为隔离性保证了多个组件实例之间不会互相干扰，样式、DOM结构都独立，无需额外处理冲突。
• connectedCallback直接挂载的组件如果要复用，需要手动做样式隔离（比如给所有元素加唯一类名前缀）、DOM冲突处理，维护成本高，容易出现意外问题。

内容的提问来源于stack exchange，提问作者Bob