Ensure ref value is always undefined when disconnected

.changeset/violet-phones-look.md

@@ -0,0 +1,7 @@
+---
+'lit-element': patch
+'lit-html': patch
+'lit': patch
+---
+
+The value provided by the `ref()` directive will always be `undefined` when the element is disconnected.

packages/lit-html/src/directives/ref.ts

@@ -67,6 +67,9 @@ class RefDirective extends AsyncDirective {
   }
 
   private _updateRefValue(element: Element | undefined) {
+    if (!this.isConnected) {
+      element = undefined;
+    }
     if (typeof this._ref === 'function') {
       // If the current ref was called with a previous value, call with
       // `undefined`; We do this to ensure callbacks are called in a consistent

packages/lit-html/src/test/directives/ref_test.ts

@@ -368,4 +368,26 @@ suite('ref', () => {
     go();
     assert.deepEqual(calls, ['DIV', undefined, 'DIV', undefined, 'DIV']);
   });
+
+  test('set to undefined when disconnected and reset when reconnected', () => {
+    let value: Element | undefined;
+    const go = () =>
+      render(html`<div ${ref((el) => (value = el))}></div>`, container);
+    const part = go();
+    assert.equal(value, container.firstElementChild);
+    part.setConnected(false);
+    assert.isUndefined(value);
+    part.setConnected(true);
+    assert.equal(value, container.firstElementChild);
+  });
+
+  test('always undefined when disconnected', () => {
+    let value: Element | undefined;
+    const go = () =>
+      render(html`<div ${ref((el) => (value = el))}></div>`, container);
+    const part = go();
+    part.setConnected(false);
+    go();
+    assert.isUndefined(value);
+  });
 });