插入元素的connectedCallback是否必然先于监听它的MutationObserver回调执行？

这个执行顺序是由Web规范明确规定的，完全可以放心依赖，具体逻辑如下：

核心规范逻辑 #

1. connectedCallback同步触发
   根据Custom Elements规范，当自定义元素被插入到DOM树时，connectedCallback会在插入操作的同步流程中立即执行。节点刚挂载到DOM的瞬间就会触发这个生命周期钩子，不会延迟到异步队列。

2. MutationObserver回调异步执行
   MutationObserver的回调会被放入微任务队列，等待当前同步执行的代码块全部完成后才会触发。也就是说，所有同步的DOM变更操作（包括自定义元素的连接逻辑）都完成后，才会处理MutationObserver的变更通知。

对应代码的执行流程 #

你的代码运行时的顺序是：

1. 打印 inserting async element
2. 执行templateEl.before(asyncElementEl)，将包含<my-element>的节点插入DOM
3. 同步触发<my-element>的connectedCallback，打印对应日志
4. 当前同步代码执行完毕，微任务队列开始处理，触发MutationObserver的回调，打印变更日志

总结 #

这个顺序是规范强制要求的，所有符合标准的浏览器都会遵循这个逻辑，你可以放心在业务代码中依赖这个执行顺序。

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