Merge pull request #228 from Polymer/fix-227

LitElement is no longer an abstract class

Author: kevinpschaaf

CHANGELOG.md

@@ -10,7 +10,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
    Unreleased section, uncommenting the header as necessary.
 -->
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Changed
+
+### Added
+* A `disconnectedCallback()` function was added (https://github.com/Polymer/lit-element/pull/213).
+
+### Changed
+* LitElement changed to a non-abstract class to be more compatible with the JavaScript mixin pattern
+(https://github.com/Polymer/lit-element/issues/227).
 
 ## [0.6.1] - 2018-09-17
 

README.md

@@ -113,7 +113,7 @@ and renders declaratively using `lit-html`.
   getter that returns the element's properties). (which automatically become observed attributes).
   1. Then implement a `render()` method and use the element's
 current properties to return a `lit-html` template result to render
-into the element. This is the only method that must be implemented by subclasses.
+into the element.
 
 ```html
   <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
@@ -149,10 +149,9 @@ into the element. This is the only method that must be implemented by subclasses
 ## API Documentation
 
   * `render()` (protected): Implement to describe the element's DOM using `lit-html`. Ideally,
-  the `render` implementation is a [pure function](https://en.wikipedia.org/wiki/Pure_function) using only the element's current properties
-  to describe the element template. This is the only method that must be implemented by subclasses.
-  Note, since `render()` is called by `update()`, setting properties does not trigger
-  an update, allowing property values to be computed and validated.
+  the `render` implementation is a [pure function](https://en.wikipedia.org/wiki/Pure_function) using only the element's current properties to describe the element template. Note, since
+  `render()` is called by `update()`, setting properties does not trigger an
+  update, allowing property values to be computed and validated.
 
   * `shouldUpdate(changedProperties)` (protected): Implement to control if updating and rendering
   should occur when property values change or `requestUpdate()` is called. The `changedProperties`

src/lit-element.ts

@@ -20,7 +20,7 @@ export * from './lib/updating-element.js';
 export * from './lib/decorators.js';
 export {html, svg} from 'lit-html/lit-html';
 
-export abstract class LitElement extends UpdatingElement {
+export class LitElement extends UpdatingElement {
 
   /**
    * Render method used to render the lit-html TemplateResult to the element's
@@ -39,11 +39,10 @@ export abstract class LitElement extends UpdatingElement {
    */
   protected update(changedProperties: PropertyValues) {
     super.update(changedProperties);
-    if (typeof this.render === 'function') {
+    const templateResult = this.render() as any;
+    if (templateResult instanceof TemplateResult) {
       (this.constructor as typeof LitElement)
-          .render(this.render(), this.renderRoot!, this.localName!);
-    } else {
-      throw new Error('render() not implemented');
+          .render(templateResult, this.renderRoot!, this.localName!);
     }
   }
 
@@ -53,5 +52,6 @@ export abstract class LitElement extends UpdatingElement {
    trigger the element to update.
    * @returns {TemplateResult} Must return a lit-html TemplateResult.
    */
-  protected abstract render(): TemplateResult;
+  protected render() {}
+
 }