在iFrame中定义customElements会引发“ DOMException：不支持的操作”。为什么？

Question

我要将自定义元素定义添加到我的iFrame。

在主浏览器窗口中，定义可以很好地工作：

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

然后将定义移至iFrame之后，我得到DOMException: operation not supported。该功能在那里，但不受支持。

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

是否有特定原因？定义自定义标签是否被设计阻止在iFrame中，并且无法解决，还是应该在iFrame配置中添加一些内容以允许这种“不安全”行为？

Answer 1

如果要将自定义元素从主HTML文档注入到<iframe>元素中，可以将其添加到<script>元素内。

例如，通过srcdoc属性：

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>

请在末尾\标记中使用转义字符</script>。