'React-like refs in lit-html / lit-element?

Does lit-html have by any change something like React's ref feature? For example in the following pseudo-code inputRef would be a callback function or an object { current: ... } where lit-html could pass/set the HTMLElement instance of the input element when the input element is created/attached.

// that #ref pseudo-attribute is fictional
html`<div><input #ref={inputRef}/></div>`

Thanks.

Solution 1:^[1]

In lit-element you can use @query property decorator. It's just syntactic sugar around this.renderRoot.querySelector().

import { LitElement, html, query } from 'lit-element';

class MyElement extends LitElement {
  @query('#first')
  first;

  render() {
    return html`
      <div id="first"></div>
      <div id="second"></div>
    `;
  }
}

Solution 2:^[2]

lit-html renders directly to the dom so you don't really need refs like you do in react, you can use querySelector to get a reference to the rendered input

Here's some sample code if you were only using lit-html

<html>

<head>
  <title>lit-html example</title>
  <script type="module">
    import { render, html } from 'https://cdn.pika.dev/lit-html/^1.1.2'; 
    const app = document.querySelector('.app'); 
    const inputTemplate = label => { 
      return html `<label>${label}<input value="rendered input content"></label>`;
    }; 
    // rendering the template
    render(inputTemplate('Some Label'), app);
    // after the render we can access it normally
    console.log(app.querySelector('input').value);
  </script>
</head>

<body>
  <div class="app"></div>
  <label>
    Other random input
    <input value="this is not the value">
  </label>
</body>

</html>

If you're using LitElement you could access to the inner elements using this.shadowRoot.querySelector if you're using shadow dom or this.querySelector if you aren't

Solution 3:^[3]

-- [EDIT - 6th October 2021] ----------------------------
Since lit 2.0.0 has been released my answer below
is completely obsolete and unnecessary!
Please check https://lit.dev/docs/api/directives/#ref
for the right solution.
---------------------------------------------------------

Even if this is not exactly what I have asked for:

Depending on the concrete use case, one option to consider is the use of directives.

In my very special use-case it was for example (with a little luck and a some tricks) possible to simulate more or less that ref object behavior.

const inputRef = useElementRef() // { current: null, bind: (special-lit-html-directive) }
...
return html`<div><input ref=${inputRef.bind}/></div>`

In my use case I could do the following:

Before rendering, set elementRef.current to null
Make sure that elementRef.current cannot be read while the component is rerendered (elementRef.current is not needed while rendering and an exception will be thrown if someone tries to read it in render phase)
That elementRef.bind directive will fill elementRef.current with the actual DOM element if available.
After that, elementRef.current can be read again.

Solution 4:^[4]

For lit-html v1, you can define your own custom Derivative:

import { html, render, directive } from "lit-html";
    
function createRef(){ return {value: null}; }
    
const ref = directive((refObj) => (attributePart) => {
  refObj.value = attributePart.committer.element;
});
    
const inputRef = createRef();
render(html`<input ref=${ref(inputRef)} />`;
     
// inputRef.value is a reference to rendered HTMLInputElement

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Alan Dávalos
Solution 3
Solution 4

'React-like refs in lit-html / lit-element?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]