Импорт HTML не работает ... Хотя он поддерживается

Question

Я сейчас немного растерялся ... Я опробую спецификацию веб-компонентов с пользовательскими элементами, шаблонами, импортом и т. Д. Но по какой-то причине спецификация импорта просто не будет работать! Похоже, что Chrome не загружает мой импорт в раздел исходных текстов, хотя он поддерживается в моей версии (67), весь код верен, как и путь. Кто-нибудь может мне помочь? Вот мой проект: Ссылка на проект github

Если вы откроете «index.html», вы увидите, что у меня есть тег ссылки, указывающий на HTML-файл. В этом файле я использую тег шаблона и добавляю его содержимое в shadowDOM пользовательского элемента, который я создал. Это работает, если я вручную копирую и вставляю код в основной файл html, но не загружается, когда я пытаюсь импортировать его. Любой вклад будет принята с благодарностью, спасибо!

Answer 1

Элемент <template> находится не в основном document, а в импортированном документе. Поэтому вы не сможете получить его, используя document.getElementById.

Вместо этого вы должны искать его в импортированном документе:

1 ° В <script> импорта определите переменную со ссылкой на импортируемый документ:

var importedDoc = document.currentScript.ownerDocument

2 ° В определении класса пользовательского элемента используйте его, чтобы получить <template>.

constructor() {
    super()
    let template = importedDoc.getElementById( 'social-button' )
    ...
}

Примечание : currentScript нельзя использовать непосредственно в constructor() по некоторым причинам , объясненным в этом посте .