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

Question

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.

Since lit-html renders directly to the dom you don't really need refs like in React, you can just `querySelector` to get a reference to the rendered input, are you using lit-html only or are you using it in LitElement? I can post a more detailed answer with an example matching what you need — Alan Dávalos, Nov 26 '19 at 05:17
Thanks, I was afraid that this would be the answer to my question. Alan, please do me a favor and open a short answer, so you will get the credit for a correct anwer. — Natasha, Nov 26 '19 at 09:33
`ref` directive has been added to Lit https://lit.dev/docs/api/directives/#ref — WeiChing 林煒清, Oct 01 '21 at 07:52

lispmachine · Answer 1 · 2020-01-24T22:35:41.103

17

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>
    `;
  }
}

edited Jan 24 '20 at 22:35

answered Jan 24 '20 at 22:30

lispmachine

4,407
1
22
31

2

This solution seems to be the most succinct, direct, and useful. – Kevin H. Apr 22 '20 at 21:51

score 5 · Answer 2 · answered Nov 27 '19 at 03:37

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

score 5 · Accepted Answer · answered Oct 06 '21 at 04:53

5

As @WeiChing has mentioned somewhere above, since Lit version 2.0 you can use the newly added directive ref for that: https://lit.dev/docs/templates/directives/#ref

answered Oct 06 '21 at 04:53

Natasha

516
7
24

Natasha · Answer 4 · 2021-10-06T04:51:15.660

-- [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.

e.g. I converted react component A to litElement B. Is it a way to use A's internal methods. e.g. const myRef = useRef() , myRef.current.innerMethod(). — kenpeter, Mar 05 '20 at 13:56

mbehzad · Answer 5 · 2022-03-05T15:00:18.207

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

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

5 Answers5