ES6/HTML5 Import Demo and Tutorial (Video)

“HTML import” is a well put together way to bring in HTML from other files. It uses minimal JavaScript to make it happen natively, and it’s only a matter of time before someone writes a nice little library on making that happen in a way that appears to be magical for designers.

Mozilla’s not supporting them, but now that I’ve used it, I’m think that this syntax was well thought out and will be easily shimmed. (I know you hate shims, but this is really small and should package nicely.)

First, note that this isn’t going to work serving it locally right from your file system. In other words, you can’t just open your HTML files in the browser from the file explorer. If you don’t know how to set up a server, then this might be a bit too advanced for you anyway. No offense, I still suck at that stuff. (why I work as a front ender!)

Anyway, this short video consists of four parts. 1) Delivering the files from the server. 2) Linking the HTML Import. 3) Using the import. 4) Understanding styles.

Delivering Files

Delivering your files in production won’t be a problem, but locally, you’ll need to use a web server. I use node in the video, but running a LAMP stack should be just fine. If you’re just reading from the file system, the OS doesn’t know what to do with the request and the browser blocks it anyway for security.

Linking the HTML and Using DOM API import method

This is covered in the HTML5Rocks Tutorial on imports, I change up my usage here a little bit, but between my sample code and their sample code, here’s what’s going on.

The browser starts rendering the html, see that there’s a link to load an import. The syntax for this is

The browser then sends a request to the server for the file. You can address this on the server side however you like (see part one).

The DOM API’s import tell the browser what you want to do with it.  You can read the document just like you would read the default document.

I have this inline at the end of the page, so it waits for everything else to be loaded. In real life, you’ll want to have it wait for the resource to be ready before using it, and the above tutorial suggests verifying the feature is in place first.

Notice, we clone one of the nodes in the imported document, this is important for what you’ll see in the next. If we just copy text or try to set them equal, you’ll get different behaviors.

Styles in the Imports

If you watch the video, that behavior might seem mighty funky. Notice when cloning the imported node:

  1. If there’s no CSS is in the imported file, the primary file’s CSS takes over.
  2. CSS that specifically targets the imported node, that carries over. This is a good way to understand how import and clone works, because the node can be viewed like the object within an object that it is from the console. A simple F12 on an element opens up all the computed attributes of the node/object in the DOM.
  3. CSS from the import acts just like a linked style sheet.  This blew my mind at first. Then… well, I realized that I was linking a file, and the browser would treat it just like any other linked file. The stuff in the head is stored somewhere, a linked stylesheet or a linked import with a style tag would effect the body the same way.

Just think of that document being hidden away in the head there. The JavaScript is copying that hidden node and putting it in the body of the main page… The magic may be gone, but now it should be much easier to conceptualize what’s going on there. You can probably also conceptualize/visualize how you’re going to make that shim or library now.


Written By StevenLacks