Создание собственного узла для расширения HTMLIFrameElement

Question

Можно ли создать пользовательский элемент вроде: "", и этот новый элемент будет иметь все функциональные возможности элемента iframe?(свои собственные объекты документа / окна и тому подобное ...)?

Answer 1

Расширение <iframe>

Чтобы расширить стандартный элемент HTML, необходимо использовать { extends: "element" } в методе customElements.define():

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> внутри.