HTML import

HTML import is part of web component framework and its specification is in Draft stage. HTML import can be used to import another html document in current document. Currently only Chrome and Opera support it.

Here is sample code using HTML import

<h2>Imported stuff</h2>
<div id="container"></div>
<link id="import1" rel="import" href="/api/html-import-hello-world.html">

var linkElement = document.querySelector('#import1');
var importedDoc = linkElement.import;
var content = importedDoc.querySelector('#content');

Few points to note

  1. Imported document does not get inserted in current document’s html on its own. It has to be handled using Javascript.
  2. We are using linkElement.import to get imported document object.
  3. To get dom element inside importedDoc, we are using importedDoc.querySelector(). After that we can clone these to insert in current page DOM.

Specification and Browser compatibility

HTML ImportsW3C Working DraftDOM, HTML5
Yes 36+ NoNoNoNoYes 23+
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ NoNoNoYes 33+
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments