如何在JavaScript自定义元素中获取元素ID，getElementById返回null怎么办？

问题原因 #

• 执行时机不对：你用的自定义HTML组件是异步渲染挂载的，要是topNav_resize函数运行的时候，导航组件还没把内部内容插入页面DOM，document.getElementById肯定找不到元素，只能返回null。
• Shadow DOM隔离：自定义Web组件一般会把内部DOM放在Shadow DOM里做样式和作用域隔离，全局的document对象是查不到Shadow DOM内部元素的，这也是很常见的触发原因。

修复方案 #

把响应式逻辑直接封装到导航组件内部，不要在全局写操作组件内部DOM的代码就行：

1. 在自定义组件的connectedCallback生命周期钩子中执行DOM查询，如果用了Shadow DOM，要用this.shadowRoot.getElementById('myTopnav')来查，不能用全局的document。
2. 把导航切换的逻辑直接绑到组件内部的汉堡按钮点击事件上，不用暴露全局函数，全封装在组件里，各个页面只需要引入组件JS、插入组件标签就能用，不用额外加其他脚本。

更优实现 #

其实响应式导航栏完全可以不用JS实现，用CSS媒体查询就能搞定，彻底规避DOM查询报错的问题：
写对应宽度的媒体查询规则，屏幕宽度小于移动端阈值时，默认隐藏导航条目、显示汉堡按钮，再借助CSS的:checked或者:focus-within伪类控制导航的展开收起，零JS代码，性能更好也不会有执行问题。

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