[lit-html] Allow undefined to be passed to the ref() directive (#3968)

.changeset/grumpy-stingrays-grab.md

@@ -0,0 +1,6 @@
+---
+'lit-html': patch
+'lit': patch
+---
+
+Allow undefined to be passed to the ref() directive

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

@@ -45,7 +45,7 @@ class RefDirective extends AsyncDirective {
   private _ref?: RefOrCallback;
   private _context?: object;
 
-  render(_ref: RefOrCallback) {
+  render(_ref?: RefOrCallback) {
     return nothing;
   }
 

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

@@ -29,6 +29,13 @@ suite('ref', () => {
     assert.equal(divRef, div);
   });
 
+  test('handles an undefined ref', () => {
+    render(html`<div ${ref(undefined)}></div>`, container);
+    const div = container.firstElementChild;
+    // Not much to assert. We mainly care that we didn't throw
+    assert.isOk(div);
+  });
+
   test('sets a ref when Ref object changes', () => {
     const divRef1 = createRef();
     const divRef2 = createRef();