Web Components自定义导航栏组件my-navbar在HTML中不显示问题排查

具体故障排查点 #

• 模板内容被错误转义为HTML实体，不存在可渲染的DOM节点
  给navTemplate.innerHTML赋值时，所有标签的尖括号、双引号都被替换成了<、>、"这类HTML显示用实体。这类字符串会被解析成纯文本，不会生成<style>、<nav>对应的真实DOM元素。相当于模板里只存了一段描述导航栏结构的文字，没有实际的页面结构，自然不会有导航渲染出来。
  举个直观的例子：如果写innerHTML = "<nav>测试</nav>"，页面上只会直接显示带尖括号的纯文本，不会生成导航组件。
• 变量未声明引发的严格模式报错
  全局变量navTemplate没有加const/let做声明，一旦页面开启严格模式，JS会直接抛出未声明变量的语法错误，阻断后续组件类定义、元素注册的全流程代码，导致自定义元素根本没完成注册。
• 代码连写不规范带来的解析兼容问题
  原代码把类定义的闭合大括号和customElements.define语句无间隔连写，部分旧版本浏览器的JS解析器会出现识别偏差，无法正确执行自定义元素的注册逻辑，浏览器遇到<my-navbar>标签时，不知道要按自定义组件规则渲染。

修复后的可直接运行代码 #

将转义的HTML实体替换回原生语法，补全变量声明、规范代码结构后，代码逻辑如下：

const navTemplate = document.createElement('template');

navTemplate.innerHTML = `
    <style>
    nav {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #0a0a23;
      width: 100%;
    }
    ul {
      margin: 0;
      padding: 0;
    }
    ul li {
      list-style: none;
      display: inline;
    }
    a {
      font-weight: 700;
      margin: 0 25px;
      color: #fff;
      text-decoration: none;
    }
    a:hover {
      padding-bottom: 5px;
      box-shadow: inset 0 -2px 0 0 #fff;
    }
    </style>
    <header>
      <nav>
        <ul>
          <li><a href="work.html">Work</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
`;

class Navbar extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(navTemplate.content);
  }
}
customElements.define('my-navbar', Navbar);

补充注意：如果用ES Module方式引入该脚本，需要在<script>标签上加type="module"属性，避免普通脚本加载的路径、跨域问题。

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