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

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

You need HTML 5 though

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

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).

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 )
} ()

Tags:

Javascript

Html

Html Imports

Html5 Template

Recent Posts