can one include `templates` in a html file similar to css?

Issue

working with html templates. code-wise, it's difficult to keep the right set of templates with each html file.

is it possible to have a file of template(s), much like a file of css, that one includes in the head section of the html file?

for example, to supplement the style section in head, one can link to a stylesheet, eg,

<link rel="stylesheet" type="text/css" href="mystyle.css" >

my app uses several collections of templates. can they be handled similar to stylesheets, ie, linked to in a separate file, or does each template definition need to be directly part of the original html file?

Solution

2020 Update

Now that HTML Imports have been deprectated, you could use fetch() to download HTML code:

void async function () {
    //get the imported document in templates:
    var templates = document.createElement( 'template' )
    templates.innerHTML = await ( await fetch( 'templates.html' ) ).text()

    //fetch template2 1 and 2:
    var template1 = templates.content.querySelector( '#t1' ) 
    var template2 = templates.content.querySelector( '#t2' ) 
    console.log( template2 )
} ()

---

Original answer

Imagine we want to import a bunch of <template>s in a separate file called templates.html.

In the (main) homepage index.html, we can import the file via HTML Imports:

<link rel="import" href="templates.html" id="templates">

In the imported file templates.html, add one or as many templates as you need:

<template id="t1">
     <div>content for template 1</div>
</template>

<template id="t2">
     content for template 2
</template>

The imported document is available from the import property of the <link> element. You can use querySelector on it.

<script>
  //get the imported document in doc:
  var link = document.querySelector( 'link#templates' )
  var doc = link.import

  //fetch template2 1 and 2:
  var template1 = doc.querySelector( '#t1' )
  var template2 = doc.querySelector( '#t2' )
</script>

Note: you can place the above script in the main document, or in the imported one because the <script>s inside an imported file are executed as soon as the are parsed (at download time).

Answered By - Supersharp