Question

在 LitElement 中哪里定义选择器 document.querySelector？

2021-05-02

2402

javascript dom frontend polymer lit-element

css 中定义了一个选择器类：

static get styles() {
    return css`
      .selector select {
  font-size: 1.125rem;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 2rem 0 1rem;
  width: 100%;
  height: 100%;
  ...
}

我试图将以下两行添加到我的 LitElement 中：

export class MyPattern extends LitElement { 
... 
selector = document.querySelector(".selector select"); 
selector.addEventListener("input", triage); 
...

但是无论我将它们放在类定义的什么位置，都会出现例外：

*my-pattern.js:150 Uncaught TypeError: Cannot read property 'addEventListener' of null*

如果可以在扩展的 LitElement 中添加这样的事件监听器，那么应该将它们写在元素类的什么位置？

Answer 1

在 LitElement 中，您的模板在影子 DOM 中呈现 - document 上的方法只能找到轻量级 DOM 元素（在根文档上下文中）。

要获取 LitElement 中的元素，您需要访问影子根：

selector = this.shadowRoot.querySelector(".selector select");

请注意，只有当 .selector 及其包含的 <select> 都位于您的元素内时，此方法才会找到您的元素。

Lit 包含一个 query 装饰器来帮助实现这一点：

@query('.selector select') selector: HTMLSelectElement;
...
this.selector.addEventListener("input", triage);

但是，Lit 为您提供了一种更好的方式来连接您的事件:

render () {
    return html`
<div class="selector">
    <select @input=${this.triage}>...
    </select>
</div>`;
}

triage(e) {
    // this will refer to the MyPattern class, not the <select> control 
}

Answer 2

styles getter 中定义的样式仅适用于 Web 组件的 shadowRoot。

MyPattern 组件的模板（在渲染函数中）应该在某处使用 .selector 类

然后，您可以使用 css 选择器查询组件的 shadowroot

selector = this.shadowRoot.querySelector(".selector select"); 
selector.addEventListener("input", triage);