-
Notifications
You must be signed in to change notification settings - Fork 4
Well behaved partial
In regards of partial to be imported, we try to be as unopinionated as possible.
The only requirements that we have are:
- It should be W3C compliant Document body.
- 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>