Skip to content

Instantly share code, notes, and snippets.

@vpalmisano
Created August 1, 2018 12:43
Show Gist options
  • Save vpalmisano/1d558f8c7e68ae2bb96c5631af55aa37 to your computer and use it in GitHub Desktop.
Save vpalmisano/1d558f8c7e68ae2bb96c5631af55aa37 to your computer and use it in GitHub Desktop.
Polymer Bin // source http://jsbin.com/gixuwad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<link href="https://unpkg.com/@polymer/polymer@2.0.0/polymer.html" rel="import" >
<link href="https://unpkg.com/@polymer/polymer@2.0.0/polymer-element.html" rel="import" >
<style>
</style>
</head>
<body>
<dom-module id='x-test'>
<template>
<template id="template">
<h1>Title</h1>
<h1>[[greeting]]</h1>
</template>
</template>
<script>
/**
* @polymer
* @customElement
* @appliesMixin News.OutletMixin
*/
class XTest extends Polymer.Element {
static get is () { return 'x-test'; }
ready () {
super.ready();
// Get a template from somewhere, e.g. light DOM
let template = this.shadowRoot.querySelector('#template');
// Prepare the template
let TemplateClass = Polymer.Templatize.templatize(template, this, {});
// Instance the template with an initial data model
let instance = new TemplateClass({greeting: 'Hi'});
// Insert the instance's DOM somewhere, e.g. element's shadow DOM
this.shadowRoot.appendChild(instance.root);
}
}
window.customElements.define(XTest.is, XTest);
</script>
</dom-module>
<x-test></x-test>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment