Create and Use a Custom HTML Component?

Question

I have the following local html:

Answer 1

Try this:

  var tmpl = (document.currentScript||document._currentScript).ownerDocument.querySelector('template');

The problem you ran into is that the template isn't really part of document but it is part of the currentScript. Due to polyfills and browser differences you need to check for currentScript and _currentScript to work correctly.

Also be aware that HTML Imports will never be fully cross browser. Most web components are moving to JavaScript based code and will be loaded using ES6 module loading.

There are things that help create templates in JS files. Using the backtick (`) is a reasonable way:

var tmpl = document.createElement('template');
tmpl.innerHTML = `
The sky is blue
`;