Skip to content

Commit 4f3fed9

Browse files
author
Steven Orvell
committed
LitElement is no longer an abstract class
This makes it easier to write types in TypeScript when using the JavasScript mixin pattern, e.g. ```(base) => class extends base {...}``` This change makes implementing the `render` method optional.
1 parent 1021514 commit 4f3fed9

File tree

3 files changed

+20
-12
lines changed

3 files changed

+20
-12
lines changed

CHANGELOG.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
1010
Unreleased section, uncommenting the header as necessary.
1111
-->
1212

13-
<!-- ## Unreleased -->
13+
## Unreleased
14+
15+
### Changed
16+
17+
### Added
18+
* A `disconnectedCallback()` function was added (https://github.com/Polymer/lit-element/pull/213).
19+
20+
### Changed
21+
* LitElement changed to a non-abstract class to be more compatible with the JavaScript mixin pattern
22+
(https://github.com/Polymer/lit-element/issues/227).
1423

1524
## [0.6.1] - 2018-09-17
1625

README.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ and renders declaratively using `lit-html`.
113113
getter that returns the element's properties). (which automatically become observed attributes).
114114
1. Then implement a `render()` method and use the element's
115115
current properties to return a `lit-html` template result to render
116-
into the element. This is the only method that must be implemented by subclasses.
116+
into the element.
117117

118118
```html
119119
<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
149149
## API Documentation
150150

151151
* `render()` (protected): Implement to describe the element's DOM using `lit-html`. Ideally,
152-
the `render` implementation is a [pure function](https://en.wikipedia.org/wiki/Pure_function) using only the element's current properties
153-
to describe the element template. This is the only method that must be implemented by subclasses.
154-
Note, since `render()` is called by `update()`, setting properties does not trigger
155-
an update, allowing property values to be computed and validated.
152+
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
153+
`render()` is called by `update()`, setting properties does not trigger an
154+
update, allowing property values to be computed and validated.
156155

157156
* `shouldUpdate(changedProperties)` (protected): Implement to control if updating and rendering
158157
should occur when property values change or `requestUpdate()` is called. The `changedProperties`

src/lit-element.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export * from './lib/updating-element.js';
2020
export * from './lib/decorators.js';
2121
export {html, svg} from 'lit-html/lit-html';
2222

23-
export abstract class LitElement extends UpdatingElement {
23+
export class LitElement extends UpdatingElement {
2424

2525
/**
2626
* Render method used to render the lit-html TemplateResult to the element's
@@ -39,11 +39,10 @@ export abstract class LitElement extends UpdatingElement {
3939
*/
4040
protected update(changedProperties: PropertyValues) {
4141
super.update(changedProperties);
42-
if (typeof this.render === 'function') {
42+
const templateResult = this.render() as any;
43+
if (templateResult instanceof TemplateResult) {
4344
(this.constructor as typeof LitElement)
44-
.render(this.render(), this.renderRoot!, this.localName!);
45-
} else {
46-
throw new Error('render() not implemented');
45+
.render(templateResult, this.renderRoot!, this.localName!);
4746
}
4847
}
4948

@@ -53,5 +52,6 @@ export abstract class LitElement extends UpdatingElement {
5352
trigger the element to update.
5453
* @returns {TemplateResult} Must return a lit-html TemplateResult.
5554
*/
56-
protected abstract render(): TemplateResult;
55+
protected render() {}
56+
5757
}

0 commit comments

Comments
 (0)