Web 组件的行为因 "defer" 是否被使用而不同

Question

我在 TypeScript 中实现了一个 WebComponent，它看起来像这样并通过 WebPack 捆绑：

class MyTestComponent extends HTMLElement {
    // ...
    connectedCallback() {
        this.config = JSON.parse(this.innerText);
// ...
customElements.define("my-test", MyTestComponent);

在网页中是这样使用的：

<my-test>
{
  "parts": [
    [3, "red"]
  ]
}
</my-test>

使用我的 WebPack 生成的测试页面效果很好，但如果我将该组件包含到另一个页面中，则会失败。我花了一些时间才发现包含脚本标记的 defer 属性有所不同。如果我使用 defer 组件工作正常。如果不是 this.innerText 在调用 connectCallback 时为空。

我想了解为什么 defer 会有所不同以及详细情况。有人可以解释一下吗？

Answer 1

它与 TypeScript 或 WebPack 无关。这是标准的 Web 组件行为。

connectedCallback 在 opening 标记上触发，其内部内容尚未解析。

使用 defer 声明自定义元素 AFTER DOM 中的所有内容都被解析

因此，要使其在您的自定义元素 定义 BEFORE 被使用时发挥作用，

您必须延迟执行，直到组件 DOM (innnerText or innerHTML) 被解析。

最简单的方法是延迟到事件循环为空：

connectedCallback() {
  setTimeout(()=>{
    this.config = JSON.parse(this.innerText);
  });
}

长答案（当 Firefox 在 2021 年 3 月之前 connectedCallback 延迟启动时）

BaseClass 工具，如 FAST、Lit、LWC 和 Hybrids，保护您免受这种标准行为的影响...
...让您学习一种工具，而不是技术。

Web 组件的行为因 "defer" 是否被使用而不同

web component behaves differently depending on "defer" being used or not

web-component

typescript