Определяя customElements в iFrame, выдает «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>

Запишите escape-символ \ в конечный тег </script>.