为什么 connectedCallback 不适用于本机 HTMLElement（不是自定义元素）？

【问题标题】：Why does the connectedCallback not work for native HTMLElement(not custom elements)?为什么 connectedCallback 不适用于本机 HTMLElement（不是自定义元素）？
【发布时间】：2021-02-02 03:06:24
【问题描述】：

我知道connectedCallback 用于自定义元素。我想知道如何使以下 sn-p 工作：

const div = document.createElement('div');
div.connectedCallback = () => console.log('connected!');
document.body.appendChild(div);
// how to make it print "connected!" here?

有些人正在制作DOM/connectedCallback，它使用MutationObserver。

MutationObserver 应该适用于这种情况，但为什么 W3C 不让 connectedCallback 为 HTMLElement 工作？为了性能？

我发现有一个只读属性isConnected，但它对检测是否连接没有帮助。

【问题讨论】：

标签： javascript lifecycle custom-element mutation-observers

【解决方案1】：

请记住，当前的 HTML5 向后兼容以前的版本

您必须穿越到 HTML 1.0 (1993) 才能将行为转变为您想要的。

新功能主要是通过 APIs 添加的。这就是为什么它被称为 Custom Elements API..
它不会改变 HTML，浏览器添加新功能，您可以从 JavaScript 调用

因此connectedCallback 是自定义元素（继承自HTMLElement）的一种方法

因此，在 HTMLElement 上检测 mutations 的唯一方法是使用：MutationObserver API

connectedCallback 不代表 DOM 准备好了；内部可能有一个非常大的 HTML 结构尚未加载。

等到你的 lightDOM 元素被创建的最简单的方法是在 EventLoop 为空时继续：

connectedCallback(){
 setTimeout(()=>{  // or requestAnimationFrame()
   // lightDOM is ready now
 },0);
}

【讨论】：