Fix queryAssignedNodes when unnamed slot is not first

package.json

@@ -23,9 +23,11 @@
   ],
   "scripts": {
     "build": "tsc && downlevel-dts . ts3.4 && cp tsconfig.json ./ts3.4/",
+    "build:watch": "tsc --watch",
     "build:babel-test": "babel src/test/lib/decorators_test.ts --out-file test/lib/decorators-babel_test.js",
     "gen-docs": "typedoc src/lit-element.ts src/lib/updating-element.ts",
     "test": "npm run build && npm run build:babel-test && wct",
+    "quicktest": "wct -l chrome -p",
     "checksize": "rollup -c ; rm lit-element.bundled.js",
     "format": "find src test | grep '\\.js$\\|\\.ts$' | xargs clang-format --style=file -i",
     "lint": "tslint --project ./",

src/lib/css-tag.ts

@@ -79,10 +79,10 @@ const textFromCSSResult = (value: CSSResult|number) => {
 };
 
 /**
- * Template tag which which can be used with LitElement's [[LitElement.styles | `styles`]] property to
- * set element styles. For security reasons, only literal string values may be
- * used. To incorporate non-literal values [[`unsafeCSS`]] may be used inside a
- * template string part.
+ * Template tag which which can be used with LitElement's [[LitElement.styles |
+ * `styles`]] property to set element styles. For security reasons, only literal
+ * string values may be used. To incorporate non-literal values [[`unsafeCSS`]]
+ * may be used inside a template string part.
  */
 export const css =
     (strings: TemplateStringsArray, ...values: (CSSResult|number)[]) => {

src/lib/decorators.ts

@@ -417,7 +417,8 @@ export function queryAssignedNodes(
           name?: PropertyKey): any => {
     const descriptor = {
       get(this: LitElement) {
-        const selector = `slot${slotName ? `[name=${slotName}]` : ''}`;
+        const selector =
+            `slot${slotName ? `[name=${slotName}]` : ':not([name])'}`;
         const slot = this.renderRoot.querySelector(selector);
         return slot && (slot as HTMLSlotElement).assignedNodes({flatten});
       },

src/lib/updating-element.ts

@@ -13,7 +13,8 @@
  */
 
 /**
- * Use this module if you want to create your own base class extending [[UpdatingElement]].
+ * Use this module if you want to create your own base class extending
+ * [[UpdatingElement]].
  * @packageDocumentation
  */
 
@@ -367,7 +368,8 @@ export abstract class UpdatingElement extends HTMLElement {
         const oldValue =
             (this as {} as {[key: string]: unknown})[name as string];
         (this as {} as {[key: string]: unknown})[key as string] = value;
-        (this as unknown as UpdatingElement).requestUpdateInternal(name, oldValue, options);
+        (this as unknown as UpdatingElement)
+            .requestUpdateInternal(name, oldValue, options);
       },
       configurable: true,
       enumerable: true
@@ -519,7 +521,8 @@ export abstract class UpdatingElement extends HTMLElement {
    */
   protected initialize() {
     this._updateState = 0;
-    this._updatePromise = new Promise((res) => this._enableUpdatingResolver = res);
+    this._updatePromise =
+        new Promise((res) => this._enableUpdatingResolver = res);
     this._changedProperties = new Map();
     this._saveInstanceProperties();
     // ensures first update will be caught by an early access of
@@ -654,7 +657,8 @@ export abstract class UpdatingElement extends HTMLElement {
    * `updateComplete` promise. This promise can be overridden and is therefore
    * not free to access.
    */
-  protected requestUpdateInternal(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration) {
+  protected requestUpdateInternal(
+      name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration) {
     let shouldRequestUpdate = true;
     // If we have a property key, perform property update steps.
     if (name !== undefined) {

src/test/lib/decorators_test.ts

@@ -86,7 +86,7 @@ suite('decorators', () => {
   suite('@customElement', () => {
     test('defines an element', () => {
       const tagName = generateElementName();
-      @customElement(tagName as keyof HTMLElementTagNameMap)
+      @customElement(tagName)
       class C0 extends HTMLElement {
       }
       const DefinedC = customElements.get(tagName);
@@ -324,7 +324,7 @@ suite('decorators', () => {
   });
 
   suite('@query', () => {
-    @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+    @customElement(generateElementName())
     class C extends LitElement {
       @query('#blah') blah?: HTMLDivElement;
 
@@ -357,7 +357,7 @@ suite('decorators', () => {
   });
 
   suite('@queryAll', () => {
-    @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+    @customElement(generateElementName())
     class C extends LitElement {
       @queryAll('div') divs!: NodeList;
 
@@ -393,7 +393,7 @@ suite('decorators', () => {
   });
 
   suite('@queryAssignedNodes', () => {
-    @customElement('assigned-nodes-el' as keyof HTMLElementTagNameMap)
+    @customElement('assigned-nodes-el')
     class D extends LitElement {
       @queryAssignedNodes() defaultAssigned!: Node[];
 
@@ -408,16 +408,33 @@ suite('decorators', () => {
       }
     }
 
+    @customElement('assigned-nodes-el-2')
+    class E extends LitElement {
+      @queryAssignedNodes() defaultAssigned!: Node[];
+
+      @queryAssignedNodes('header') headerAssigned!: Node[];
+
+      render() {
+        return html`
+          <slot name="header"></slot>
+          <slot></slot>
+        `;
+      }
+    }
+
     // Note, there are 2 elements here so that the `flatten` option of
     // the decorator can be tested.
-    @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+    @customElement(generateElementName())
     class C extends LitElement {
-      @query('div') div!: HTMLDivElement;
+      @query('#div1') div!: HTMLDivElement;
+      @query('#div2') div2!: HTMLDivElement;
       @query('assigned-nodes-el') assignedNodesEl!: D;
+      @query('assigned-nodes-el-2') assignedNodesEl2!: E;
 
       render() {
         return html`
-          <assigned-nodes-el><div>A</div><slot slot="footer"></slot></assigned-nodes-el>
+          <assigned-nodes-el><div id="div1">A</div><slot slot="footer"></slot></assigned-nodes-el>
+          <assigned-nodes-el-2><div id="div2">B</div></assigned-nodes-el-2>
         `;
       }
     }
@@ -439,6 +456,16 @@ suite('decorators', () => {
       assert.deepEqual(c.assignedNodesEl.defaultAssigned, [c.div]);
     });
 
+    test(
+        'returns assignedNodes for unnamed slot that is not first slot',
+        async () => {
+          const c = new C();
+          container.appendChild(c);
+          await c.updateComplete;
+          await c.assignedNodesEl.updateComplete;
+          assert.deepEqual(c.assignedNodesEl2.defaultAssigned, [c.div2]);
+        });
+
     test('returns flattened assignedNodes for slot', async () => {
       const c = new C();
       container.appendChild(c);
@@ -461,7 +488,7 @@ suite('decorators', () => {
   });
 
   suite('@queryAsync', () => {
-    @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+    @customElement(generateElementName())
     class C extends LitElement {
       @queryAsync('#blah') blah!: Promise<HTMLDivElement>;
 
@@ -504,7 +531,7 @@ suite('decorators', () => {
       if (!supportsOptions) {
         this.skip();
       }
-      @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+      @customElement(generateElementName())
       class C extends LitElement {
         eventPhase?: number;
 
@@ -532,7 +559,7 @@ suite('decorators', () => {
       if (!supportsOptions) {
         this.skip();
       }
-      @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+      @customElement(generateElementName())
       class C extends LitElement {
         clicked = 0;
 
@@ -561,7 +588,7 @@ suite('decorators', () => {
       if (!supportsPassive) {
         this.skip();
       }
-      @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+      @customElement(generateElementName())
       class C extends LitElement {
         defaultPrevented?: boolean;
 

src/test/lib/updating-element_test.ts

@@ -1976,19 +1976,17 @@ suite('UpdatingElement', () => {
   });
 
   test('can customize properties to update synchronously', async () => {
-
     interface MyPropertyDeclaration extends PropertyDeclaration {
       sync: boolean;
     }
 
     @customElement(generateElementName())
     class E extends UpdatingElement {
-
       static getPropertyDescriptor(
-        name: PropertyKey,
-        key: string|symbol,
-        options: MyPropertyDeclaration) {
-        const defaultDescriptor = super.getPropertyDescriptor(name, key, options);
+          name: PropertyKey, key: string|symbol,
+          options: MyPropertyDeclaration) {
+        const defaultDescriptor =
+            super.getPropertyDescriptor(name, key, options);
         const setter = defaultDescriptor.set;
         return Object.assign(defaultDescriptor, {
           set(this: E, value: unknown) {
@@ -2021,15 +2019,14 @@ suite('UpdatingElement', () => {
         this.updateCount++;
       }
 
-      @property({type: Number, sync: true, reflect: true} as PropertyDeclaration)
+      @property(
+          {type: Number, sync: true, reflect: true} as PropertyDeclaration)
       foo = 5;
 
       @property({type: Number, sync: true} as PropertyDeclaration)
       zug = this.foo;
 
-      @property({})
-      bar = 'bar';
-
+      @property({}) bar = 'bar';
     }
 
     const el = new E();

src/test/lit-element_styling_test.ts

@@ -899,8 +899,7 @@ suite('Static get styles', () => {
       });
 
   const testAdoptedStyleSheets =
-      (window.ShadowRoot) &&
-      ('replace' in CSSStyleSheet.prototype);
+      (window.ShadowRoot) && ('replace' in CSSStyleSheet.prototype);
   (testAdoptedStyleSheets ? test : test.skip)(
       'Can return CSSStyleSheet where adoptedStyleSheets are natively supported',
       async () => {
@@ -933,7 +932,8 @@ suite('Static get styles', () => {
         // When the WC polyfills are included, calling .replaceSync is a noop to
         // our styles as they're already flattened (so expect 4px). Otherwise,
         // look for the updated value.
-        const usesAdoptedStyleSheet = (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow);
+        const usesAdoptedStyleSheet =
+            (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow);
         const expectedValue = usesAdoptedStyleSheet ? '2px' : '4px';
         sheet.replaceSync('div { border: 2px solid red; }');
 
@@ -945,8 +945,7 @@ suite('Static get styles', () => {
   // Test that when ShadyCSS is enabled (while still having native support for
   // adoptedStyleSheets), we can return a CSSStyleSheet that will be flattened
   // and play nice with others.
-  const testShadyCSSWithAdoptedStyleSheetSupport =
-      (window.ShadowRoot) &&
+  const testShadyCSSWithAdoptedStyleSheetSupport = (window.ShadowRoot) &&
       ('replace' in CSSStyleSheet.prototype) &&
       (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow);
   (testShadyCSSWithAdoptedStyleSheetSupport ? test : test.skip)(
@@ -977,7 +976,8 @@ suite('Static get styles', () => {
         sheet.replaceSync('div { border: 2px solid red; }');
         assert.equal(
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
-            '4px', 'CSS should not reflect CSSStyleSheet as it was flattened');
+            '4px',
+            'CSS should not reflect CSSStyleSheet as it was flattened');
       });
 });