tpluscode/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<body>
  <vanilla-lit tagline="Luke"></vanilla-lit>
  <script src="bundle.js"></script>
</body>
</html>

## index.js
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);

## package.json
{
  "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"
  }
}

## template-factory.js
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`;
}

## webpack.config.js
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'src'),
    filename: 'bundle.js'
  }
};
	<!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'
	}
	};