在弹出窗口中使用 Web 组件在 Firefox 中不起作用

Question

TLDR 在弹出窗口中添加 Web 组件在 Chrome / Edge 中按预期工作。但在 Firefox 中，在我将 Web 组件添加到 dom 之前它正在运行，但之后它又恢复为

HTMLElement

并且 Web 组件的内部方法停止被识别。

这是一个小提琴，是这个问题的简化再现： https://jsfiddle.net/2avd0un4/

场景 我有一个双屏应用程序，主窗口基本上是编辑器，第二个可选弹出窗口是预览。我对大多数自定义控件使用 Web 组件。

问题 我主要使用 Chrome / Edge，这种情况运行良好（Web 组件在弹出窗口中按预期使用）。我在 Firefox 中做了一些测试，发现了这个问题。我可以以编程方式创建一个 Web 组件，并检查它是否按预期工作。对此的简写是，当连接组件时，我从组件类内部检查

this.constructor.name

。我的示例组件名为“SayHello”，这是预期的输出。

在我的现实世界项目中，Web 组件有很多内部方法，我在类内部使用这些方法，例如

this.someFunction();

。

问题是，在 FireFox 的弹出窗口中，就在我使用

appendChild

将 Web 组件添加到 dom 后，Web 组件停止识别为

SayHello

并开始返回

HTMLElement

。因此，类中的任何内部方法都不起作用，整个组件基本上停止运行。在添加到dom之前就很好了。但就在它恢复到

HTMLElement

之后。

询问 看看 Fiddle，它是这个的简化版本。在 Chrome / Edge 中尝试可以，但在 Firefox 中会失败并返回

HTMLElement

。有什么办法可以让我完成这项工作吗？

更新 也将此作为 Firefox 中的错误提交...但如果有人有关于解决方法的想法，我很想听听。 https://bugzilla.mozilla.org/show_bug.cgi?id=1893321

Answer 1

在此处提交解决方法作为答案。我针对 Firefox 创建了一个 bug，他们发现这是 6 年前提出的已知问题。最初的错误文件管理器有这样的解决方法：

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    this.__proto__ = customElements.get('my-custom-element').prototype;
    this._log();
  }
  
  _log() {
    console.log('It works!');
  }
});

基本上只是在 Web 组件连接后强制原型是正确的。

显然，当尝试跨任何框架（如 iFrame 或新窗口）使用 Web 组件时，就会发生这种情况。

原始错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1502814