Import HTML document using HTML link rel

For latecomers:

As of 2021, HTML imports feature has been deprecated (MDN Link).

Due to uncertainty about this feature, I would not recommend its usage.

My recommendation: Add a data- attribute to html imports. Write a script that runs on all those elements with that attribute and access those html parts using fetch() in the script. Create a div and add that fetched import to that div at the same place. Essentially, add some JS based post processing that will download the html and inset into the same place as the import, replacing it.


HTML Imports only work natively in Chrome Canary (and even there they're only half-baked). For that presentation, Eric uses a project called Polymer, which provides a polyfill for HTML Imports (among other things). Check it out!

Update: The current partial implementation of HTML Imports isn't even available in Chrome Canary. Its flag is set to only turn it on for tests (not builds). It's not even an option in about:flags yet.

Update again: Now there's a flag in about:flags. It's called Enable HTML Imports. Not sure exactly when it came about. I've got it in Chrome 32.0.1671.3 dev on Linux.