Импорт 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() по некоторым причинам, объясненным в этом посте.