HTML Imports

"HTML Imports are a way to include and reuse HTML documents in other HTML documents."

Define an import link
Allows bundling HTML/CSS/JS as a single resource

Alternatives

<iframe>
AJAX

- Only static html files? what is the different then $.get request to server?
- Does a regular querySelector works with iframe?
- <iframe> - An iframe's content lives entirely in a separate context than your page. While that's mostly a great feature, it creates additional challenges (shrink wrapping the size of the frame to its content is tough, insanely frustrating to script into/out of, nearly impossible to style).
- AJAX - I love xhr.responseType="document", but you're saying I need JS to load HTML? That doesn't seem right.
- Examples to show: (1) Chrome network getting the html (2) import from same url is only parsed once, Script will run once (3)
- How to script from imports? Answer: document.currentScript.ownerDocument
- How to copy events from import when doing .cloneNode(true) ?? Answer: No simple way

Demo

Import HTML file with kitty

                  
<link rel="import" href="fileWithKittyImage.html">

                  
// Grab content
var link = document.querySelector('link[rel="import"]');
var content = link.import;

// Grab relevant DOM from kitty page
var kitty = content.querySelector('.kitty');

// Append to our DOM
var examplePlaceHolder = document.querySelector('#examplePlaceHolder');
examplePlaceHolder.appendChild(kitty.cloneNode(true));

HTML Imports

Alternatives

Demo

Import HTML file with kitty

Example: