Skip to content

Well behaved partial

Tomek Wytrębowicz edited this page Feb 18, 2015 · 1 revision

In regards of partial to be imported, we try to be as unopinionated as possible.

The only requirements that we have are:

  1. It should be W3C compliant Document body.
  2. It should contain at least one <template> tag in root node, (or in <imported-template-scope> node)

Besides that you are free to do whatever you want! Use nested <script>s, <link>s with HTML Imports and CSS, anything that W3C allows you to do, as long as you provide us at least one <template> to stamp it where imported-template is.

We will import your partial with HTML Import, so it will get processed by browser according to W3C rules. Then, once imported document is ready we will grab <template>/-s from there, and stamp it in your document (the one with <template is="imported-template">), as many times as needed (repeat attribute, more instances, etc.).

To sum up most common cases: Once you attach <template is="imported-template" content="/path/to/file.html"> into your DOM, it will import file.html

<link rel="import" href="my-element.html"> <!-- will get imported once, 
  just after `imported-template` receives it as an attribute, 
  as described at http://www.w3.org/TR/html-imports/ -->
<link rel="stylesheet" href="my-style.css">
<script>
  console.log("This script will be executed also only once.");
  console.log("So, it's a good place to define your objects, classes, prepare some stuff.");
  console.log("You can also refer to this document with", document.currentScript.ownerDocument);
</script>
<template><!-- this one will get stamped into main document, or the document where `imported-template` is -->
  <p>So, probably, you would put ton of HTML code here</p>
  <my-element>
    Naturally Custom Elements defined in imported document will work here like charm, even Polymer ones.
  </my-element>
  <p>
    You can also use {{mustaches}} with Polymer Expressions, and use it as you would with regular 
    Polymer Template Binding. You will get model object from `imported-template` instance.
  </p>
  <script>
    console.log("You can also use scripts here, those will be executed once per stamped template.");
    console.log("So, it's a good place to create instances of your awesome JS objects, and create as heavy client as you want.");
    console.log("If you don't use Polymer's Binding you can reach attached JSON model, with",
     document.currentScript.parentNode.model);
  </script>
  <link rel="import" href="some-thing.html"><!-- you can also use imports here, 
    but be aware that according to W3C, as anything else inside `<template>` tag, 
    those will get stamped into document and processed by browser, after template is stamped -->

</template>
Clone this wiki locally