自定义元素场景下document.querySelector选取内部元素返回null问题求助

问题根因 #

你获取不到节点是因为两处时序差：

1. 自定义元素left-navbar的connectedCallback里用了无延迟setTimeout，会把内部DOM插入的逻辑推到当前宏任务队列末尾执行
2. 你的外部查询代码执行时机早于自定义元素内部DOM插入完成的时机，所以querySelector必然返回null

方案1：组件内部抛出加载完成事件（推荐，符合封装原则） #

第一步：修改自定义组件代码，渲染完成后抛自定义事件

class Navbar extends HTMLElement {
    connectedCallback() {
        setTimeout(() => {
            this.innerHTML = `
            <nav id='navbar'>
                <i class="fas fa-home" id='home-i'></i>
                <hr class="line">
                <i class="fas fa-arrow-alt-circle-left" id='back-i'></i>
                <i class="fas fa-brain"></i>
                <i class="fas fa-lightbulb" id='quiz-i'></i>
                <i class="fas fa-sign-out-alt" id='exit-i'></i>
            </nav>
            `
            // 新增：抛出渲染完成事件
            this.dispatchEvent(new CustomEvent('navbar-ready'))
        });
    }
}
customElements.define('left-navbar', Navbar)

第二步：外部监听事件后再操作节点

const navbar = document.querySelector('left-navbar')
navbar.addEventListener('navbar-ready', () => {
    const homeBtn = navbar.querySelector('#home-i')
    homeBtn.addEventListener('click', () => {
        window.location.href = 'index.html';
        changePageTitle(0);
    })
})

方案2：无需修改组件代码，用MutationObserver监听DOM变化 #

如果你不能修改自定义组件的源码，用这个方案监听left-navbar的子节点插入：

const navbar = document.querySelector('left-navbar')
const observer = new MutationObserver((mutations) => {
    // 检查是否已经插入了目标节点
    const homeBtn = navbar.querySelector('#home-i')
    if (homeBtn) {
        // 找到节点后绑定事件，销毁监听
        observer.disconnect()
        homeBtn.addEventListener('click', () => {
            window.location.href = 'index.html';
            changePageTitle(0);
        })
    }
})
// 监听子节点变化
observer.observe(navbar, { childList: true, subtree: true })

方案3：组件内部直接绑定事件（最简洁，适合组件内逻辑） #

如果跳转逻辑不需要和外部页面耦合，直接把事件绑定写在组件内部即可：

class Navbar extends HTMLElement {
    connectedCallback() {
        setTimeout(() => {
            this.innerHTML = `
            <nav id='navbar'>
                <i class="fas fa-home" id='home-i'></i>
                <hr class="line">
                <i class="fas fa-arrow-alt-circle-left" id='back-i'></i>
                <i class="fas fa-brain"></i>
                <i class="fas fa-lightbulb" id='quiz-i'></i>
                <i class="fas fa-sign-out-alt" id='exit-i'></i>
            </nav>
            `
            // 内部直接绑定事件
            this.querySelector('#home-i').addEventListener('click', () => {
                window.location.href = 'index.html';
                changePageTitle(0);
            })
        });
    }
}
customElements.define('left-navbar', Navbar)

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