Work-In-Progress example of using lit-html with Polymer
TypeScript 95.68%HTML 4.32%
lit-element's Introduction
lit-element
Base class for creating custom elements using Polymer and lit-html.
import{LitElement,html}from'node_modules/@polymer/lit-element/lit-element.js'classMyElementextendsLitElement{// Public property API that triggers re-render (synched with attributes)staticgetproperties(){return{foo: String,whales: Number}}constructor(){super();this.foo='foo';}ready(){this.addEventListener('click',async(e)=>{this.whales++;awaitthis.nextRendered;this.dispatchEvent(newCustomEvent('whales',{detail: {whales: this.whales}}))});super.ready();}// Render method should return a `TemplateResult` using the provided lit-html `html` tag functionrender({foo, whales}){returnhtml`<style> :host { display: block; }</style><h4>Foo: ${foo}</h4><div>whales: ${'๐ณ'.repeat(whales)}</div><slot></slot> `;}}customElements.define('my-element',MyElement);
<my-elementwhales="5">hi</my-element>
Known Issues
This element does not yet work with the ShadyCSS polyfill. Support is coming soon!