自定义导航栏Web Component报错：this.getElementById不是函数

问题根源 #

1. HTMLElement无getElementById方法：自定义元素实例（this）继承自HTMLElement，该接口并没有getElementById方法，这个方法属于document对象。
2. DOM渲染顺序错误：你在connectedCallback里先执行添加active类的代码，再调用render()生成DOM，此时组件内部还没有目标元素，自然无法找到。

修复方案 #

调整代码执行顺序，改用组件内的节点查找方法，同时添加错误防护：

修改connectedCallback方法：

connectedCallback(){
  const page = this.getAttribute('page');
  console.log(page) //Returns "home"
  console.log(typeof page) //Returns "string"
  this.render(); // 先渲染DOM结构
  // 在组件内部查找对应id的导航链接
  const targetLink = this.querySelector(`#${page}`);
  // 防止page参数无效导致找不到元素报错
  if(targetLink){
    targetLink.classList.add("active");
  }
}

额外优化点 #

你的CSS规则里有一处错误：

.nav-pills .nav-item .nav-link:not(active) {
    color: #000000; 
}

应该修改为：

.nav-pills .nav-item .nav-link:not(.active) {
    color: #000000; 
}

:not()选择器里匹配类名需要加上.，否则会错误匹配标签名为<active>的元素。

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