lit-element - lit-html/lit-element 中有类似 React 的引用吗？

Question

lit-html 是否有类似 React 的 ref 功能的更改？ 例如，在下面的伪代码中 inputRef 将是一个回调函数或一个对象 { current: ... } 其中 lit-html 可以传递/设置 HTMLElement 实例创建/附加输入元素时的输入元素。

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

谢谢。

Answer 1

在lit-element中你可以使用@query属性(property)装饰师。它只是围绕 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>
    `;
  }
}