只有在 DOM 准备就绪后才开始操作它是一个古老的常识，我们可以确定所有元素都可用，在后 jQuery 时代我们都在使用 DOMContentLoaded为此举办的事件。
现在 Web 组件(尤其是自治自定义元素的形式)倾向于创建自己的 HTML，通常在 connectedCallback() 生命周期方法中。
第一个问题:
DOMContentLoaded 与(自主)自定义元素有何关系？只有在所有组件 connectedCallbacks 完成后事件才会发生吗？如果不是，我如何确保某些代码仅在 Web 组件完成初始化后执行？
第二个问题，完全相关:
Web 组件如何与 script 元素的 defer 属性相关？
最佳答案
它们在不同的轴上。 DOMContentLoaded 是关于解析初始 HTML 文档，因此是下载的原始"file"。组件在定义时准备就绪。
我也不熟悉这个主题，所以只是修改了 MDN 示例以通过按下按钮完全分离这两个事件。我假设新组件的定义随时都可能发生，事实确实如此。
MDN 示例是 on GitHub , 链接自 CustomElementRegistry.define (以及其他各种页面)。他们也有一个实时变体 on GitHub IO ，但这当然只是原始示例。
把完整的例子放在这里感觉没希望了，所以这只是修改后的 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pop-up info box — web components</title>
</head>
<body id="body">
<h1>Pop-up info widget - web components</h1>
<form>
<div>
<label for="cvc">Enter your CVC <popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></label>
<input type="text" id="cvc">
</div>
</form>
<!--<script src="main.js"></script>-->
<script>
function test(){
var x=document.createElement("script");
x.src="main.js";
document.getElementById("body").appendChild(x);
}
customElements.whenDefined("popup-info").then(function(){alert("popup-info");});
document.addEventListener("DOMContentLoaded",function(){alert("DOMContentLoaded")});
</script>
<button onclick="test()">Test</button>
</body>
</html>
所以 main.js 不会自动加载，只有在按下按钮后才会加载，它仍然有效。 “DOMContentLoaded”弹出窗口已经出现很长时间了。但是，有一个 CustomElementRegistry.whenDefined()这是有耐心的，只有在自定义元素被定义后才会触发。我认为这就是您可以使用的，也许可以从 DOMContentLoaded 订阅它，因此您的最终事件将保证在 DOM 和自定义元素都准备就绪时发生。缺点是您必须知道您正在等待的自定义元素的名称。 (未经测试的假设，但基于 https://html.spec.whatwg.org/multipage/scripting.html 上的调度图，可以使 whenDefined() 在 DOMContentLoaded 之前发生。顺便说一句:图表还显示了defer 会，所以如果你将 whenDefined() 放入延迟脚本中，回调将在 DOMContentLoaded 之后发生，或者至少我是这样的相信)
关于javascript - DOMContentLoaded 与 Web 组件有什么关系？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51362204/