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

【问题标题】：Firefox removes web component properties when appended inside iframeFirefox 在 iframe 中附加时删除 Web 组件属性
【发布时间】：2019-10-30 21:40:54
【问题描述】：

我正在尝试在 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。

【问题讨论】：

标签： javascript firefox iframe web-component

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您可以尝试将 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);
})

【讨论】：