Address review feedback.

Author: Steven Orvell

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 * The value returned by `render` is always rendered, even if it isn't a `TemplateResult`. ([#712](https://github.com/Polymer/lit-element/issues/712)
 
 ### Added
+* Added `@asyncQuery(selector)` decorator which returns a Promise resolves to the result of querying for the given selector after the element's `updateComplete` Promise resolves ([#903](https://github.com/Polymer/lit-element/issues/903)).
 * Added `enableUpdating()` to `UpdatingElement` to enable customizing when updating is enabled [#860](https://github.com/Polymer/lit-element/pull/860).
 * Added `queryAssignedNodes(slotName, flatten)` to enable querying assignedNodes for a given slot [#860](https://github.com/Polymer/lit-element/pull/860).
 * Added `getStyles()` to `LitElement` to allow hooks into style gathering for component sets [#866](https://github.com/Polymer/lit-element/pull/866).

src/lib/decorators.ts

@@ -207,6 +207,11 @@ export function internalProperty(options?: InternalPropertyDeclaration) {
  *         `;
  *       }
  *     }
+ *
+ *     // external usage
+ *     async doSomethingWithFirst() {
+ *      (await aMyElement.first).doSomething();
+ *     }
  */
 export function query(selector: string) {
   return (protoOrDescriptor: Object|ClassElement,
@@ -229,8 +234,9 @@ export function query(selector: string) {
  * A property decorator that converts a class property into a getter that
  * returns a promise that resolves to the result of a querySelector on the
  * element's renderRoot done after the element's `updateComplete` promise
- * resolves and after the queried element's `updateComplete` promise resolves
- * (if it is a LitElement).
+ * resolves. When queried property may change with element state, this decorator
+ * can be used instead of requiring users to await the `updateComplete` before
+ * accessing the property.
  *
  * @param selector A DOMString containing one or more selectors to match.
  *
@@ -257,12 +263,7 @@ export function asyncQuery(selector: string) {
     const descriptor = {
       async get(this: LitElement) {
         await this.updateComplete;
-        const el = this.renderRoot.querySelector(selector);
-        // if this is a LitElement, then await updateComplete
-        if (el) {
-          await (el as LitElement).updateComplete;
-        }
-        return el;
+        return this.renderRoot.querySelector(selector);
       },
       enumerable: true,
       configurable: true,

src/test/lib/decorators_test.ts

@@ -461,27 +461,11 @@ suite('decorators', () => {
   });
 
   suite('@asyncQuery', () => {
-    @customElement('dep-el' as keyof HTMLElementTagNameMap)
-    class D extends LitElement {
-
-      wasUpdated = false;
-
-      render() {
-        return html`dep`;
-      }
-
-      firstUpdated() {
-        this.wasUpdated = true;
-      }
-    }
-
 
     @customElement(generateElementName() as keyof HTMLElementTagNameMap)
     class C extends LitElement {
       @asyncQuery('#blah') blah!: Promise<HTMLDivElement>;
 
-      @asyncQuery('dep-el') dep!: Promise<D>;
-
       @asyncQuery('span') nope!: Promise<HTMLSpanElement|null>;
 
       @property()
@@ -491,8 +475,8 @@ suite('decorators', () => {
         return html`
           <div>Not this one</div>
           ${this.foo ?
-            html`<div id="blah" foo>This one</div><dep-el foo></dep-el>` :
-            html`<div id="blah">This one</div><dep-el></dep-el>` }
+            html`<div id="blah" foo>This one</div>` :
+            html`<div id="blah">This one</div>` }
         `;
       }
     }
@@ -509,20 +493,6 @@ suite('decorators', () => {
       assert.isTrue(div.hasAttribute('foo'));
     });
 
-    test('returns an element when it exists after update that is itself updated', async () => {
-      const c = new C();
-      container.appendChild(c);
-      let dep = await c.dep;
-      assert.instanceOf(dep, D);
-      assert.isFalse(dep.hasAttribute('foo'));
-      assert.isTrue(dep.wasUpdated);
-      c.foo = true;
-      dep = await c.dep;
-      assert.instanceOf(dep, D);
-      assert.isTrue(dep.hasAttribute('foo'));
-      assert.isTrue(dep.wasUpdated);
-    });
-
     test('returns null when no match', async () => {
       const c = new C();
       container.appendChild(c);