Skip to content

Instantly share code, notes, and snippets.

@JanMiksovsky

JanMiksovsky/realTemplate.html

Created October 2, 2015 21:49
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save JanMiksovsky/ef59c30222b5d5fc06b5 to your computer and use it in GitHub Desktop.
Save JanMiksovsky/ef59c30222b5d5fc06b5 to your computer and use it in GitHub Desktop.
Download ZIP
Create a Polymer element using a real <template>, not a <dom-module>
Raw
realTemplate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="import" href="../components/polymer/polymer.html">
<template id="test-element">
Hello, <content></content>.
</template>
</head>
<body>
<test-element>world</test-element>
<script>
Polymer({
is: 'test-element',
_template: document.querySelector('#test-element')
});
</script>
</body>
</html>
@JanMiksovsky
Copy link
Author

Polymer's template-stamping feature can accept a regular template, not just one supplied via a <dom-module>. It turns out that the template can be referenced declaratively by defining a _template variable.

Note: if defining the element in an HTML import, change the _template declaration to use currentImport, which is Polymer sugar for the current HTML import:

_template: currentImport.querySelector('#test-template')

It would be cool if Polymer supported this more formally, e.g., by dropping the underscore from _template. This would allow direct use of real templates without relying on proprietary <dom-module> elements.

@Nevraeka
Copy link

Nevraeka commented Nov 6, 2015

This is great! I wish I could add an '_template' value that is a es2015 template string as well. Thanks for sharing this

@lastmjs
Copy link

lastmjs commented Apr 14, 2016

Would it be worth it to create an issue for this, or somehow bring it up with the team?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment