是否可以创建一个自定义元素，例如：""，并且这个新元素将具有 iframe 元素的所有功能？ （它自己的文档/窗口对象等......）？
【问题讨论】：
document.registerElement() 并克隆 iframe 原型，但我不能保证它适用于 iframe 开箱即用的所有功能。这听起来确实是一件不平凡的工作。想解释一下自定义元素可以解决哪些普通 iframe 无法解决的问题？
扩展<iframe>
要扩展标准 HTML 元素，您必须在 customElements.define() 方法中使用 { extends: "element" }：
class MyFrame extends HTMLIFrameElement {
constructor () {
super()
console.log( 'created')
}
}
customElements.define( 'my-frame', MyFrame, { extends: 'iframe' } )
然后使用is="custom-element"属性创建扩展元素：
<iframe is='my-frame'></iframe>
然后您可以将其用作标准 <iframe> 并添加您的自定义功能。
定义一个新的 HTML 标签
Alternaltey，如果您想要一个新的标签名称，请创建一个自治自定义元素（源自 HTMLElement），其中包含标准 <iframe> 元素：
class NewFrame extends HTMLElement {
constructor() {
super()
console.log( 'created' )
this.attachShadow( { mode: 'open' } )
.innerHTML = "<iframe></iframe>"
}
connectedCallback() {
setTimeout( () =>
this.shadowRoot.querySelector( 'iframe' ).contentDocument.body.innerHTML = this.innerHTML
)
}
}
customElements.define( 'new-frame', NewFrame )
在本例中，自定义元素将使用<new-frame> 的内容来填充<iframe> 文档。
<new-frame>Hello world !</new-frame>
此解决方案的缺点是您的新元素不会充当<iframe>。您必须为要转发到 <iframe> 内部的所有功能定义一些自定义方法。
【讨论】：