Skip to content

Custom element that lets 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. Declarative way for client-side includes boosted with HTML Imports features.

License

Notifications You must be signed in to change notification settings

Juicy/imported-template

Repository files navigation

<imported-template> Build Status

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

<imported-template> is a custom element that lets 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. are completely native. It also provides a 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 load all dependencies and stamp template content in your main document with just

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

Please note that dependencies will be loaded only once, but content and inner <script>doMagic... will get stamped and executed as many times as you use <imported-template>

Demo/Examples

To see more features and examples Check it live!

Features

See the full article on features, use cases 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 the 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-lite.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:

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

    To attach data to content:

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

Attributes/Properties

Attribute Options Default Description
html String "" Safe HTML code to be stamped. Setting this one will skip any pending request for href and remove href attribute.
href String "" Path of a partial to be loaded. Setting this one will remove html attribute.
model(optional) Object/String undefined Object (or JSON.stringify'ied Object) to be attached to every stamped (root) node

Properties

Property Type Default Description
model Object undefined See attributes, plays nice with Polymer data-binding
html String "" See attributes
href String "" See attributes
pending HTMLLinkElement HTML Import's <link> that is being loaded (if any)
stampedNodes Array [] Array of stamped nodes.

Please note, that properties are available after element is upgraded. To provide a state before element is upgraded, please use attributes.

Events

Name When event.detail
stamped Every time content is (re-)stamped Array of stamped Node s
stamping Just before stamping the fragment DocumentFragment being stamped

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 support relies mainly on polyfills support/spec compliance.

Chrome IE11 Edge Firefox Safari 10
✓**

** V1: IE11 does not support currentScript, so a bunch of tests for useful cases fail.

History

For the detailed changelog, check Releases.

License

MIT

About

Custom element that lets 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. Declarative way for client-side includes boosted with HTML Imports features.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published