Skip to content

Instantly share code, notes, and snippets.

@tpluscode
Created August 28, 2017 19:19
Show Gist options
  • Save tpluscode/713f5763ded29404a35e18ee4a48c2af to your computer and use it in GitHub Desktop.
Save tpluscode/713f5763ded29404a35e18ee4a48c2af to your computer and use it in GitHub Desktop.
Importing and stamping templates with ES6 and lit-html
<!DOCTYPE html>
<html lang="en">
<body>
<vanilla-lit tagline="Luke"></vanilla-lit>
<script src="bundle.js"></script>
</body>
</html>
import {html} from 'lit-html';
import {render} from 'lit-html/lib/lit-extended';
import {PropertyAccessors} from '@polymer/polymer/lib/mixins/property-accessors';
import * as templateFactory from './template-factory';
export default class VanillaLitComponent extends PropertyAccessors(HTMLElement) {
constructor() {
super();
this._template = templateFactory.templateOne;
}
static get observedAttributes() {
return [
'tagline',
'_template'
];
}
connectedCallback() {
this._enableProperties();
}
_propertiesChanged() {
render(
html`${this._template.call(this)}
<br>
<button on-click=${this.__switchTemplate}>Click me!</button>`,
this);
}
__switchTemplate() {
this._template = templateFactory.templateTwo
}
}
VanillaLitComponent.createPropertiesForAttributes();
window.customElements.define('vanilla-lit', VanillaLitComponent);
{
"name": "vanilla-lit",
"version": "0.0.0",
"description": "Almost-Vanilla custom element with lit-html and importing templates",
"main": "index.js",
"author": "tpluscode",
"scripts": {
"start": "http-server",
"build": "webpack --optimize-minimize",
"dev": "webpack -w"
},
"license": "MIT",
"dependencies": {
"@polymer/polymer": "next",
"lit-html": "0.6.0"
},
"devDependencies": {
"http-server": "^0.10.0",
"webpack": "3.5.5"
}
}
import {html} from 'lit-html';
export function templateOne() {
return html`I'm the default template<br>I say that ${this.getAttribute('tagline')}`;
}
export function templateTwo() {
return html`I appear when you click that button`;
}
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'src'),
filename: 'bundle.js'
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment