создавать пользовательские элементы в iframe

Question

Поскольку импорт html еще не поддерживается (например, Firefox не планирует этого делать), я попытался имитировать его использование при импорте пользовательских элементов через iframes.

The way I 'мы попытались сделать это, загрузив скрипт в iframe, который определяет пользовательский элемент в верхнем контексте просмотра;и после этого iframe может быть удален из документа.Причина, по которой я пытался это сделать, заключается в том, что я хотел бы динамически определять пользовательские элементы в соответствии с информацией, которую я получаю на стороне клиента;и эти пользовательские элементы используют шаблоны, которые будут использоваться в теневом DOM.

Я предпочитаю использовать шаблоны вместо построения теневого DOM в скрипте, чтобы иметь чистый код;Вот почему я хотел бы имитировать функциональность импорта с помощью iframe со всеми шаблонами, а не просто загружать скрипт, в котором построен теневой DOM.

Однако способ, который я пробовал, не работает (протестировано в google chrome и firefox):

// iframe.js

class XAElement extends HTMLElement{
 constructor(){
  super()
  // Any customization here
 }
 // Any other methods for functionality
}
top.customElements.define('x-a', XAElement)

Разрешено ли определять пользовательские элементы верхнего контекста просмотра в iframe?

Примечание. Файл iframe.html представляет собой любой HTML-файлкоторый загружает этот скрипт;и файл index.html (в котором происходит ошибка) - это любой файл, который загружает iframe iframe.html.

Примечание 2: Я получаю ошибку afer super();однако, если я прокомментирую последнюю строку (в которой я намерен определить пользовательский элемент), ошибки не произойдет.

Answer 1

После нескольких модификаций скрипта для тестирования я понял, что HTMLElement отличается от top.HTMLElement.Вот почему наследование от HTMLElement не сработало для определения пользовательского элемента, поскольку ему разрешено наследовать только от HTMLElement из контекста просмотра, где определен пользовательский элемент.

Затем, изменивскрипт к:

// iframe.js

class XAElement extends top.HTMLElement{
 constructor(){
  super()
  // Any customization here
 }
 // Any other methods for functionality
}
top.customElements.define('x-a', XAElement)

в итоге он работает.

Я пойду по этому пути, потому что после определения пользовательского элемента и сохранения необходимого содержимого шаблона в классе конструктора (как свойства,может быть сделано до определения пользовательского элемента), я могу удалить iframe.Таким образом, мне нужно только загрузить iframe;дождаться выполнения этих требований;и удалите iframe, чтобы (я думаю) отменить влияние на производительность создания вложенного содержимого браузера.

Примечание. Если сценарий выполняется до загрузки шаблонов, которые необходимо использовать, сохранение содержимого шаблона в конструкторе должно бытьпоместите в слушатель события загрузки.

Редакция:

Я забыл проверить, что произойдет, если я удалю iframe в момент публикации ответа.Что происходит, это то, что он перестает работать;вот почему я принимаю другой ответ.

Answer 2

Честно говоря, я бы не стал загружать веб-компонент с помощью импорта HTML.Он устарел и будет удален из всех браузеров.

Вместо этого начните использовать модули ES6 или даже просто создайте традиционные файлы JavaScript.

Существует множество способов упаковать шаблон в файл JS., включая component-build-tools или Webpack или другие вещи.

Мой совет - прекратить использовать dead tech и перейти на текущие парадигмы загрузки модулей.

Answer 3

Если вы хотите имитировать HTML-импорт, вам лучше использовать библиотеку HTMLImports.min.js, предоставляемую в репозитории Github .

<script src="htmlimports.min.js"></script>

Обратите внимание, что HTMLВстроенная поддержка Chrome будет удалена в следующем выпуске (версия 73), поскольку в Mozilla и Apple не было достигнуто единого мнения относительно этой функции, предложенной Google ... но указанная выше библиотека все равно будет работать как простой загрузчик HTML.

---

В качестве альтернативы вы можете загрузить контент HTML с помощью fetch(), как описано в этом посте о альтернативах импорта HTML .

---

Если вы все еще хотите использовать <iframe> элемент для загрузки файла HTML, вам нужно подождать, пока файл будет загружен, прежде чем получить доступ к его содержимому.

<iframe src="XA.html" onload="defineXA()"></iframe>

Я не думаю, что это хорошая практика, потому что это создаст бесполезный контекст просмотра.