diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5526817f..cb42ed23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,14 +12,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
## 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).
+([#227](https://github.com/Polymer/lit-element/issues/227)).
+* Update lit-html dependency to ^0.12.0 ([#244](https://github.com/Polymer/lit-element/pull/244)),
+* Passes the components `this` reference to lit-html as the `eventContext`, allowing unbound event listener methods. ([#244](https://github.com/Polymer/lit-element/pull/244)).
+### Added
+* A `disconnectedCallback()` method was added to UpdatingElement([#213](https://github.com/Polymer/lit-element/pull/213)).
+* Added `@eventOptions()` decorator for setting event listener options on methods ([#244](https://github.com/Polymer/lit-element/pull/244)).
+
+
## [0.6.1] - 2018-09-17
diff --git a/README.md b/README.md
index b2a8b644..b07e7668 100644
--- a/README.md
+++ b/README.md
@@ -65,7 +65,7 @@ and renders declaratively using `lit-html`.
* expression: ``` html`${this.disabled ? 'Off' : 'On'}
` ```
* property: ``` html`
` ```
- * event handler: ``` html` = {
- new (...args: unknown[]): T
+ new (...args: any[]): T
};
/**
@@ -89,3 +89,35 @@ function _query(queryFn: (target: NodeSelector, selector: string) => T) {
});
};
}
+
+/**
+ * Adds event listener options to a method used as an event listener in a
+ * lit-html template.
+ *
+ * @param options An object that specifis event listener options as accepted by
+ * `EventTarget#addEventListener` and `EventTarget#removeEventListener`.
+ *
+ * Current browsers support the `capture`, `passive`, and `once` options. See:
+ * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
+ *
+ * @example
+ *
+ * class MyElement {
+ *
+ * clicked = false;
+ *
+ * render() {
+ * return html`
`;
+ * }
+ *
+ * @eventOptions({capture: true})
+ * _onClick(e) {
+ * this.clicked = true;
+ * }
+ * }
+ */
+export const eventOptions = (options: EventListenerOptions) =>
+ (proto: any, name: string) => {
+ // This comment is here to fix a disagreement between formatter and linter
+ Object.assign(proto[name], options);
+ };
diff --git a/src/lit-element.ts b/src/lit-element.ts
index 3c21b85c..b8ea547f 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -42,16 +42,16 @@ export class LitElement extends UpdatingElement {
const templateResult = this.render() as any;
if (templateResult instanceof TemplateResult) {
(this.constructor as typeof LitElement)
- .render(templateResult, this.renderRoot!, this.localName!);
+ .render(templateResult, this.renderRoot!,
+ {scopeName : this.localName!, eventContext : this});
}
}
/**
- Invoked on each update to perform rendering tasks. This method must return a
- lit-html TemplateResult. Setting properties inside this method will *not*
- trigger the element to update.
+ * Invoked on each update to perform rendering tasks. This method must return
+ * a lit-html TemplateResult. Setting properties inside this method will *not*
+ * trigger the element to update.
* @returns {TemplateResult} Must return a lit-html TemplateResult.
*/
protected render() {}
-
}
diff --git a/src/test/lib/decorators_test.ts b/src/test/lib/decorators_test.ts
index 30c265b8..50b789f4 100644
--- a/src/test/lib/decorators_test.ts
+++ b/src/test/lib/decorators_test.ts
@@ -12,6 +12,7 @@
* http://polymer.github.io/PATENTS.txt
*/
+import {eventOptions} from '../../lib/decorators.js';
import {
customElement,
html,
@@ -120,4 +121,31 @@ suite('decorators', () => {
assert.lengthOf(spans, 0);
});
});
+
+ suite('@eventOptions', () => {
+ test('allows capturing listeners', async () => {
+ @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+ class C extends LitElement {
+ eventPhase?: number;
+
+ render() {
+ return html`
+
+ `;
+ }
+
+ @eventOptions({capture : true})
+ onClick(e: Event) {
+ this.eventPhase = e.eventPhase;
+ }
+ }
+
+ const c = new C();
+ container.appendChild(c);
+ await c.updateComplete;
+ const button = c.shadowRoot!.querySelector('button')!;
+ button.click();
+ assert.equal(c.eventPhase, Event.CAPTURING_PHASE);
+ });
+ });
});
diff --git a/src/test/lit-element_test.ts b/src/test/lit-element_test.ts
index 4da476ee..b96c6884 100644
--- a/src/test/lit-element_test.ts
+++ b/src/test/lit-element_test.ts
@@ -978,7 +978,7 @@ suite('LitElement', () => {
render() {
const attr = 'attr';
const prop = 'prop';
- const event = (e: Event) => { this._event = e; };
+ const event = function(this: E, e: Event) { this._event = e; };
return html
`
`;
}
@@ -995,6 +995,24 @@ suite('LitElement', () => {
assert.equal(el._event, e);
});
+ test('event listeners are invoked with the right `this` value', async () => {
+ class E extends LitElement {
+ event?: Event;
+
+ render() { return html`
`; }
+
+ onTest(e: Event) { this.event = e; }
+ }
+ customElements.define(generateElementName(), E);
+ const el = new E();
+ container.appendChild(el);
+ await el.updateComplete;
+ const div = el.shadowRoot!.querySelector('div')!;
+ const event = new Event('test');
+ div.dispatchEvent(event);
+ assert.equal(el.event, event);
+ });
+
test('`firstUpdated` called when element first updates', async () => {
class E extends LitElement {