Skip to content

Instantly share code, notes, and snippets.

@pomber

pomber/index.html

Last active February 28, 2016 02:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pomber/1fa7b41dcdcffad90551 to your computer and use it in GitHub Desktop.
Save pomber/1fa7b41dcdcffad90551 to your computer and use it in GitHub Desktop.
Download ZIP
From Zero to Polymer: Step 03 - HTML import
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="my-element.html">
</head>
<body>
<my-element></my-element>
<my-element></my-element>
</body>
</html>
Raw
my-element.html
<!-- my-element.html -->
<template id="my-element-template">
<p>My <b>custom element</b> markup!</p>
</template>
<script>
// thisDoc refers to the "importee", which is my-element.html
var thisDoc = document.currentScript.ownerDocument;
// thatDoc refers to the "importer", which is index.html
var thatDoc = document;
var MyElementProto = Object.create(HTMLElement.prototype);
MyElementProto.createdCallback = function() {
var t = thisDoc.querySelector('#my-element-template');
var clone = thisDoc.importNode(t.content, true);
this.appendChild(clone);
};
var MyElement = thatDoc.registerElement(
'my-element', { prototype: MyElementProto }
);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment