Firefox removes web component properties when appended inside iframe

Question

I am trying to append a web component DOM node comp with a property myprop inside an 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
})

This works perfectly in Chrome and Safari. However, Firefox seems to delete myprop after comp is appended to the body of the iframe.

Answer 1

Chrome and Firefox don't have the same interpretation of the Custom Element definition scope.

With Chrome, when you move a custom element from the main document to an inner <iframe>, it remains a (defined) custom element with all its methods and properties.

With Firefox, when you move a custom element from the main document to an inner <iframe>, because of frame isoation, the custom element is undefined in the context of the Frame, the element is an unknown tag with no custom property or custom method.