Javascript 在LitElement中的何处定义selector document.querySelector？

选择器类在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中添加这样的事件侦听器，那么它们应该在元素类中的何处写入？

在

styles

getter中定义的样式仅适用于web组件的shadowRoot

MyPattern

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

.selector

类

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

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

---

在LitElement中，模板在阴影DOM中呈现，

document

上的方法只能在根文档上下文中找到轻型DOM元素

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

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

请注意，只有当

.selector

及其包含的

都在元素内部时，才会找到元素

Lit包括一个用于帮助解决此问题的：

@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 
}

render（）{
返回html`
...
`;
}
分流（e）{
//这将引用MyPattern类，而不是控件
}

您正在尝试将事件侦听器添加到当前元素还是其他元素？我正在尝试将其添加到

类MyPattern extends LitElement

，即当前元素。有没有成功的例子可供我参考？LitElement文档站点上的那些对我帮助不大。