I have checked and there are "similar" questions here but I want to rule out Google's polyfil for WebComponents and also time has moved on since the majority of the 2015 discussions and, most importantly, Javascript Modules appear to have ruled themselves out of providing "import" template functionality. (Sticking to importing VARs, Functions, and Objects from other modules only)
So to my question: -
"What is the suggested/best cross-browser solution for importing/including HTML Templates?"
I see nothing wrong, functionality wise, with Chrome's <LINK TYPE="IMPORT"> but unfortunately Safari, Firefox, and Edge seemed to have ruled it out :-(
So what's next best?
XHR2 responseType="document?
XHR type="text/html"
document.createElement("template").innerHTML = responseText
document.headd.appendChild(newTemplate);
?
<script id="storeStringsHere></script> ?
Anything else?
ShadowDOM V1.0, Templates, Modules, and even Custom Components look to be all making the cut. (Which is great!) but with HTML Imports being black-balled we/I need an alternative cross-browser solution. Please help.
Why is LINK good for CSS but not for Templates?
Since there's no native solution, use HTML Imports (native or polyfilled) is a solution as good as any other one (XMLHttpRequest, fetch, other JS library) to import templates as HTML files.
Anyways HTML Imports polyfill, like any other Module Loader JS library, uses XMLHttpRequest under the wood. So don't consider it as a polyfill but as just yet another JS module loader.
Alternately you can implement your own Module Loader with XMLHttpRequest (or fetch). It's just a few lines of codes.