CODEWITHSUNDEEP
javascriptiframecustom-element
Bubr
Bubr

Reputation: 21

Defining customElements in iFrame throws "DOMException: Operation not supported". Why?

I want to add Custom Element definition to my iFrame.

In the main browser window the definition works perfectly fine:

customElements.define("custom-tag", customTag)

Then after moving the definition to the iFrame, I get DOMException: operation not supported. The function is there but is not supported.

iFrame.contentWindow.customElements.define("custom-tag", customTag);

Is there a particular reason for this? Is defining custom tags blocked in iFrame by design and cannot be worked around or should I include something in my iFrame configuration to allow this "unsafe" behaviour?

Upvotes: 2

Views: 676

Answers (1)

Supersharp
Supersharp

Reputation: 31181

If you want to inject a custom element from the main HTML document into an <iframe> element, you can add it inside a <script> element.

For example, via the srcdoc property:

frame.srcdoc = `
  <script>
    class customTag extends HTMLElement {
        constructor() {
    	    super()
            this.attachShadow( { mode: 'open' } )
                .innerHTML = "Hello World"
        }
    } 
    customElements.define( 'custom-tag', customTag )
  <\/script>
  <custom-tag></custom-tag>
`
<iframe id=frame></iframe>

Note the escape character \ into the ending </script> tag.

Upvotes: 2

Related Questions