javascript - 根据 shadowroot 中元素的 ID 获取标签

Question

我有下面的 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 的标签，但它让我为空。有人可以告诉这里的错误是什么吗？

Answer 1

您应该使用参考，而不是查询元素：

引用渲染的 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;
  }

我还建议使用constandlet而不是 var。此外，您可能应该ResizeObserver在window. 也不要忘记注销您的事件监听器。