Skip to main content

Useful tips for using HTML imports (part 2)

Front-End Developer
Sep 30, 2014

Part 2 of my two-part series about using HTML imports explores the options of manipulating the import file with a DOM API, and I also take a look at dependency management and performance.

For HTML imports basics check out part 1 of the series!

Using a DOM API

An HTML import file is just a document, nothing more, so you can manipulate it with any DOM API.

You could ask: why is this good for me? Using scripts for simple HTML imports might sound strange, but I’ll show you why you should, anyway!

Imports are not in the main document, they are totally independent. However, even though the main document reigns supreme, your import can still affect the main page! An import can access its own DOM and/or the DOM of the page that’s importing it. Simply put, you can make complete modules or applications that you can reuse anytime.

There are some rules and observations about scripts in imports, though:

  • The script in the import is executed in the context of the window that contains the importing document. So functions defined in the import will be going to the window and you don’t have to append the script blocks to get the script executed.
  • Scripts in the import don’t block the parsing of the main page, but scripts themselves are executed in order.

Sub imports

Some use cases require components to import other components. This is entirely possible with HTML imports. I went 4 levels deep and it still worked perfectly. Be careful not to lose track of your imports in the importing chain, though! Keep your code well organized, future you will thank you for it.

Dependency management

By including many web components, you’ll inevitably load something more than once. We all know that loading jQuery multiple times can cause errors, but if we use HTML imports this problem is solved: Like I wrote before if we include something from the same domain or resource path, it is parsed only once. Great, right?

Performance questions

Like with all web resources there is plenty of room for optimization. For example, if you have many top level imports you might consider wrapping them up in one single file.

Another cool thing about imports is that the elements in an import file are dormant until you call them. Only scripts, links and styles are executed directly.

Many people forget that the browser’s networking stack has been finely tuned over the years. Imports (and sub-imports) take advantage of this logic, too. The http://cdn.com/bootstrap.html import might have sub-resources, but they’ll be cached.

Not all the modern browsers support imports (Chrome supports it from ver. 32), for those that do, you can use this awesome tool from polymer.

Conclusion

Lets recap what we’ve learned about HTML imports!

HTML Imports allow bundling HTML/CSS/JS as a single resource. While useful by themselves, this idea becomes extremely powerful in the world of Web Components. Developers can create reusable components for others to use in their own apps, all delivered through
.

Things to remember:

  • An import’s mimetype is text/html.
  • Resources from other origins need to be CORS-enabled.
  • Imports from the same URL are only parsed once. That means a script in an import is only executed the first time the import is seen.
  • Scripts in an import are processed in order, but do not block the main document’s parsing.
  • Elements are dormant until you call them.

I had fun playing around with this tool, but I feel I didn’t even scratch the surface of all the possibilities. It’s good to know that resource management is so cool in native HTML! If you develop using separate units or your code is easily reusable, then you can stockpile them for later use.

Sources: http://www.w3.org/TR/html-imports/ and Eric Bidelman

Richárd works as a Front-End Developer at Pronovix.

Newsletter

Articles on devportals, DX and API docs, event recaps, webinars, and more. Sign up to be up to date with the latest trends and best practices.

 

Subscribe