README
html-imports-content
HTML Imports with content inlining, or replacing by selector.
Features
- Enables simple client-side page composition, with support for lazy loading.
- Improve speed of web by allowing different HTML snippets to be cached independently. Similar in concept to Edge Side Includes (ESI).
- Declarative definition to encourage future native browser implementation and search engine support.
Install
Bower
bower install --save html-imports-content
npm
npm install --save html-imports-content
Use
<script src="html-imports-content.js"></script>
<!-- ... -->
<script>
// Later, once DOM content loaded...
// this will process all content imports in the DOM so far.
window.importsContent();
</script>
Inline
Inserts loaded HTML inline (at the same location as the statement):
<link rel="import" inline href="header.html">
Replace
Replaces element(s) matching CSS selector specified in replace attribute with loaded HTML:
<link rel="import" replace="#header" href="header.html">
Manual
var link = document.createElement('link');
link.rel = "import";
link.href = "header.html";
link.setAttribute('inline', '');
document.body.appendChild(link);
window.importsContent(link);
// or multiple:
// window.importsContent( [ link, link2, ... ] );