Update values after upgrading custom elements

src/lib/shady-render.ts

@@ -40,7 +40,7 @@ const verifyShadyCSSVersion = () => {
     return false;
   }
   return true;
-}
+};
 
 /**
  * Template factory which scopes template DOM using ShadyCSS.

src/lit-html.ts

@@ -179,10 +179,11 @@ export function render(
   (container as TemplateContainer).__templateInstance = instance;
 
   const fragment = instance._clone();
-  instance.update(result.values);
 
   removeNodes(container, container.firstChild);
   container.appendChild(fragment);
+
+  instance.update(result.values);
 }
 
 /**

src/test/lib/lit-extended_test.ts

@@ -268,5 +268,71 @@ suite('lit-extended', () => {
       assert.equal((container.firstElementChild as any).foo, 1234);
     });
 
+    const suiteIfCustomElementsAreSupported = (window.customElements != null) ? suite : suite.skip;
+
+    suiteIfCustomElementsAreSupported('when rendering custom elements', () => {
+      suiteSetup(() => {
+        if (customElements.get('x-test-uses-property-setters') == null) {
+          class CustomElement extends HTMLElement {
+            public readonly calledSetter = false;
+            private _value?: string = undefined;
+
+            public get value(): string|undefined {
+              return this._value;
+            }
+
+            public set value(value: string|undefined) {
+              (this as {calledSetter: boolean}).calledSetter = true;
+              this._value = value;
+            }
+          }
+
+          customElements.define('x-test-uses-property-setters', CustomElement);
+        }
+      });
+
+      setup(() => {
+        // Container must be in the document for the custom element to upgrade
+        document.body.appendChild(container);
+      });
+
+      teardown(() => {
+        document.body.removeChild(container);
+      });
+
+      test('uses property setters for custom elements', () => {
+        render(html`
+          <x-test-uses-property-setters value=${'foo'}></x-test-uses-property-setters>
+        `, container);
+        const instance = container.firstElementChild as HTMLElement & {
+          value: string;
+          calledSetter: boolean;
+        };
+
+        assert.equal(instance.value, 'foo');
+        assert.isTrue(instance.calledSetter);
+      });
+
+      test('uses property setters in nested templates added after the initial render', () => {
+        const template = (content: any) => html`${content}`;
+
+        // Do an initial render
+        render(template('some content'), container);
+
+        // Now update the rendered template, render a nested template
+        const fragment = html`
+          <x-test-uses-property-setters value=${'foo'}></x-test-uses-property-setters>
+        `;
+        render(template(fragment), container);
+        const instance = container.firstElementChild as HTMLElement & {
+          value: string;
+          calledSetter: boolean;
+        };
+
+        assert.equal(instance.value, 'foo');
+        assert.isTrue(instance.calledSetter);
+      });
+    });
+
   });
 });

src/test/lib/shady-render_test.ts

@@ -164,7 +164,7 @@ suite('shady-render', () => {
     window.console.warn = function() {
       warnCount++;
       warn.apply(window.console, arguments);
-    }
+    };
     const fn = window.ShadyCSS.prepareTemplateDom;
     window.ShadyCSS.prepareTemplateDom = undefined;