Javascript 当附加到iframe中时，Firefox将删除web组件属性

我试图在iframe中附加一个web组件DOM节点

comp

，其属性

myprop

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中非常有效。但是，Firefox似乎会在将comp添加到iframe主体后删除

myprop

。

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

---

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

使用Chrome，当您将自定义元素从主文档移动到内部

时，它仍然是一个（定义的）自定义元素及其所有方法和属性

在Firefox中，当您将自定义元素从主文档移动到内部

时，由于框架同构，自定义元素在框架上下文中未定义，该元素是一个未知标记，没有自定义属性或自定义方法