Lit组件ShadowRoot内按ID获取元素取标签名返回null问题求助

• 默认配置下Lit组件会将内容渲染到Shadow DOM中，Shadow DOM是独立于全局document DOM树的隔离DOM容器，document.getElementById() 只能查询全局DOM树里的元素，无法访问到组件Shadow DOM内部的节点，所以会返回null。
• 构造函数执行时组件还未完成首次渲染，就算你关闭了Shadow DOM渲染到全局DOM，此时DOM节点也还没生成，提前触发resize事件也会出现找不到元素的问题。

将查询API替换为Shadow根的查询方法，同时建议增加非空判断避免报错：

private _handleResize = () =>{
  // 从组件的shadowRoot中查询元素
  var some_id = this.shadowRoot.getElementById('col');
  if (some_id) {
    var tag = some_id.tagName;
    // 后续业务逻辑
  }
}

如果你的业务场景不需要Shadow DOM隔离，也可以在组件中关闭Shadow DOM后用原有方式查询：

class YourComponent extends LitElement {
  // 关闭Shadow DOM，内容直接渲染到light DOM
  createRenderRoot() {
    return this;
  }
  // 其余组件逻辑
}

内容的提问来源于stack exchange，提问作者Rick