根据shadowroot中元素的ID获取标签答案

【问题标题】：Getting tag based on ID of element inside shadowroot根据shadowroot中元素的ID获取标签
【发布时间】：2021-11-15 20:48:55
【问题描述】：

我有下面的 html，我在一个发光的组件中呈现：

render() {
    return html`
          <div class="table">
            <div id="col">
              <p>testing this component</p>
</div>
</div>`

通过以下构造函数，我正在调用调整大小处理程序：

constructor() {
    super();
    window.addEventListener('resize', this._handleResize);
  }

handleresize方法如下：

private _handleResize = () =>{
  var some_id = document.getElementById('col');
  var tag = some_id.tagName; ///some_id is coming out as null
}

我正在尝试获取“col”ID 的标签，但它让我为空。谁能告诉这里的错误是什么？

【问题讨论】：

shadowRoot 被封装。您需要从那里获取元素：this.shadowRoot?.getElementById('col');

标签： javascript typescript constructor lit

【解决方案1】：

您应该使用引用而不是查询元素：

Referencing rendered DOM

import {ref} from 'lit/directives/ref.js';

[...]

  colRef = createRef();

[...]

  render() {
    return html`
      <div class="table">
        <div id="col" ${ref(this.colRef)}>
          <p>testing this component</p>
        </div>
      </div>`
  }

  private _handleResize = () =>{
    const col = this.colRef.value!;
    const tag = col.tagName;
  }

我还建议使用const 和let 而不是var。此外，您可能应该使用ResizeObserver 而不是window 上的事件监听器。另外不要忘记取消注册您的事件监听器。

【讨论】：