如果使用 defer，WebComponent setter 不会触发

Question

我最近注意到，当您使用使用 defer 属性的脚本标记注入 Web 组件 javascript 文件时，Web 组件中的 setter 没有被调用。您可以在此处查看代码：https://codesandbox.io/s/web-component-with-setter-1ij4o

在 index.html 的 script 标签内，我将属性 foobar 设置为“测试”。这应该触发 web 组件的 setter，它应该通过警报命令将值“test”打印到屏幕上。但这不会发生。如果删除 defer 属性，一切都会按预期进行。你能告诉我为什么会这样吗？你有没有在不删除 defer 属性的情况下调用 setter 的解决方案？

Answer 1

发生的事情是您的内联脚本运行ning 在延迟脚本之前。

您可以通过将内联脚本放入文件中并使用 defer 属性加载它或将内联代码放入 'DOMContentLoaded' 事件后运行的事件侦听器中来解决此问题。

document.addEventListener('DOMContentLoaded', () => {
  const wc = document.querySelector("custom-text");
  wc.foobar = "test";
});

如果使用 defer，WebComponent setter 不会触发

WebComponent setter not triggered if defer is used

javascript

web-component