使用Web Component时document.querySelector返回null报错如何解决？

1. 核心触发点是自定义元素的错误写法：HTML规范中仅<img>、<input>这类空元素（void element）支持自闭合写法，自定义元素必须使用完整的开闭标签。你页面中写的<nav-bar/>会被浏览器错误解析为未闭合的<nav-bar>起始标签，后续的<h1>、<ol class="recent">、<footer>等所有节点都会被当成<nav-bar>的内部子节点。
2. 你在NavBar组件的connectedCallback生命周期中直接给this.innerHTML赋值，直接覆盖了<nav-bar>内部所有节点，导致原本应该在DOM里的ol.recent被直接删除，所以document.querySelector('ol.recent')返回null，触发类型错误。

• 第一优先级修复：把页面DOM结构中的自闭合<nav-bar/>改为完整的开闭标签：

<!-- 错误写法 -->
<nav-bar/>
<!-- 正确写法 -->
<nav-bar></nav-bar>

• 可选优化：在操作DOM前增加存在性判断，避免偶发的元素不存在导致的页面报错，修改getContent中的对应代码：

// 原代码
document.querySelector('ol.recent').innerHTML = htm;
// 修改后代码
const recentList = document.querySelector('ol.recent');
if (recentList) {
  recentList.innerHTML = htm;
}

• 额外优化：如果担心自定义组件加载顺序影响DOM结构，可以等待自定义元素定义完成后再执行业务逻辑：

if (customElements.get('nav-bar')) {
  getContent()
} else {
  customElements.whenDefined('nav-bar').then(getContent)
}

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