Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Create a Polymer element using a real <template>, not a <dom-module>
<!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

This comment has been minimized.

Copy link
Owner Author

@JanMiksovsky JanMiksovsky commented Oct 2, 2015

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

This comment has been minimized.

Copy link

@Nevraeka 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

This comment has been minimized.

Copy link

@lastmjs 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
You can’t perform that action at this time.