Prefer @query over ref() (matschik#175)

* Prefer query over ref Lit team prefers suggesting `@query` over `ref`. Though this example is simple enough to just do `this.renderRoot.querySelector('input')!.focus()` as well, the title for this section is "dom-ref" * remove typescript syntax
11reed · Sep 15, 2023 · 9c8091e · 9c8091e
1 parent 6b8e5d3
commit 9c8091e
Showing 1 changed file with 4 additions and 5 deletions.
diff --git a/content/2-templating/5-dom-ref/lit/input-focused.js b/content/2-templating/5-dom-ref/lit/input-focused.js
@@ -1,16 +1,15 @@
 import { LitElement, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { ref, createRef } from "lit/directives/ref.js";
+import { customElement, state, query } from "lit/decorators.js";
 
 @customElement("input-focused")
 export class InputFocused extends LitElement {
-  inputRef = createRef();
+  @query('input') inputEl;
 
   firstUpdated() {
-    this.inputRef.value.focus();
+    this.inputEl.focus();
   }
 
   render() {
-    return html`<input type="text" ${ref(this.inputRef)} />`;
+    return html`<input type="text" />`;
   }
 }