imported-template v1.5.0

<imported-template>

Declarative way for client-side includes boosted with HTML Imports features.

<imported-template> (in fact <template is="imported-template">) is a custom element that let's you load template from external file into your document, and take full control over loaded <script>s and <link rel="import">s. Thanks to HTML Imports - caching, script execution, etc. is completely native. It also provides simple data-binding feature, that plays nice with Polymer or pure JavaScript + HTML data-binding.

Small sample

If you have your partial /path/to/file.html full of your HTML magic:

<link rel="import" href="awesome-component.html">
<script src="init/some/stuff.js"></script>
<template>
	<h1>Hello World</h1>
	<awesome-component></awesome-component>
	<script>doMagicPerStampedContent();</script>
</template>

You can stamp template content in your main document with just

<template is="imported-template" content="/path/to/file.html"></template>

Demo/Examples

To see more features and examples Check it live!

Tests/Spec

Features

See the full article on features, usecases and the way it's done at http://starcounter.io/html-partialsincludes-webcomponents-way/

• Imports external files, and stamps inline HTML markup,
• Supports multiple (concatenated) templates per partial,
• HTML Imports features:
• Sends request for template only once (HTML Import's caching),
• Supports <script>, <link>, <style> tags to be executed once,
• Supports <script>, <style> tags per template instance,
• Attaches data-binding to imported content,
• Works fine with Polymer auto-binding features

Partial limitations

• It should be W3C compliant Document body,
• It should contain at least one <template> tag in root node.

Rationale

imported-template evolved out of x-html (now juicy-html ) due to need for better control of <scripts> and HTML Imports execution. See discussion here

Install

Install the component using Bower:

$ bower install imported-template --save

Or download as ZIP.

Usage

1. Import Web Components' polyfill, if needed:

   <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

2. Import Custom Element:

   <link rel="import" href="bower_components/imported-template/imported-template.html"/>

3. Start using it!

   To load content from file:

   <template is="imported-template" content="./your/partial.html"></template>

   To attach data to content:

   <template is="imported-template" content="./your/partial.html" model='{"json":"data"}'></template>

Attributes/Properties

Properties

Events

Dependencies

<juicy-html> is framework agnostic custom element, so all you need is Web Components support. However, it plays really nice with Polymer Auto-binding templates, or any other binding library, that sets HTML elements' properties and/or attributes. Check our demos and examples.

Browser Support

Browser supports relies mainly on polyfills support/spec compliance.

* There is a workaround for polyfill issue, to execute scripts and apply styles define inside template in imported html. Also, some hacks are made to preserve correct position in DOM of scripts executed by polyfill, so previousSibling and Polymer's dom-bind/dom-repeat can be used as in native Web Components, see more sample use cases

~ SauceLabs tests passed but it may not be stable.

:construction: Core features more or less works, but some tests are failing.

Contributing and Development

History

For detailed changelog, check Releases.

License

MIT