为什么 connectedCallback 不适用于原生 HTMLElement不是自定义元素？

问题描述

我知道 connectedCallback 用于自定义元素。我想知道如何使以下代码段起作用：

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，但它对检测连接与否没有帮助。

解决方法

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

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

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

因此 connectedCallback 是自定义元素（从 HTMLElement 扩展）的方法

因此检测 HTMLElement 上突变的唯一方法是使用：MutationObserver API

connectedCallback 并不意味着 DOM 已经准备好了；可能有一个非常大的 HTML 结构里面尚未加载。

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

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