Firefox удаляет свойства веб-компонента при добавлении в iframe

Question

Я пытаюсь добавить узел DOM веб-компонента comp со свойством myprop внутри iframe.

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, похоже, удаляет myprop после добавления comp к телу iframe.

Answer 1

Chrome и Firefox не имеют одинаковую интерпретацию области определения пользовательского элемента.

В Chrome при перемещении пользовательского элемента из основного документа во внутренний <iframe> он остается ((определенный) пользовательский элемент со всеми его методами и свойствами.

В Firefox при перемещении пользовательского элемента из основного документа во внутренний <iframe> из-за выделения кадра пользовательский элемент не определен в контекстефрейма, элемент является тегом unknown без пользовательского свойства или пользовательского метода.

Answer 2

Вы можете попытаться сохранить значение comp.myprop в другой переменной и переназначить его на comp после добавления comp в iframe. Как то так:

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);
})