Firefox 在附加到 iframe 中时删除 Web 组件属性

Question

我正在尝试在 iframe 中附加带有属性 myprop 的 Web 组件 DOM 节点 comp。

const frame = document.createElement('iframe')
frame.src = 'about:blank'

frame.addEventListener('load', _ => {
   console.log(comp.myprop) // "abc"
   frame.contentDocument.body.appendChild(comp)
   console.log(comp.myprop) // undefined in Firefox, "abc" in Chrome, Safari
})

这在 Chrome 和 Safari 中完美运行。但是，在将 comp 附加到 iframe 的主体后，Firefox 似乎删除了 myprop。

Answer 1

您可以尝试将 comp.myprop 的值存储在一些不同的变量中，并在将 comp 添加到 iframe 后在 comp 上重新分配它。像这样：

frame.addEventListener('load', _ => {
  console.log(comp.myprop);
  var propStorage = comp.myprop;

  frame.contentDocument.body.appendChild(comp);

  //You might need to add if(comp.myprop === undefined) here
  comp.myprop = propStorage;
  console.log(comp.myprop);
})

Answer 2

Chrome 和 Firefox 对自定义元素定义范围的解释不同。

使用 Chrome，当您将自定义元素从主文档移动到内部 <iframe> 时，它仍然是一个（已定义的）自定义元素及其所有方法和属性。

对于 Firefox，当您将自定义元素从主文档移动到内部 <iframe> 时，由于框架隔离，自定义元素在框架的上下文中未定义，该元素是未知没有自定义属性或自定义方法的标签。

Firefox 在附加到 iframe 中时删除 Web 组件属性

Firefox removes web component properties when appended inside iframe

javascript

iframe

firefox

web-component