Vanilla JS自定义组件：ShadowRoot中Window滚动等事件适配问题

一、组件化核心思路 #

原生JS中实现可复用页眉，推荐使用自定义元素（Custom Elements），它能天然实现DOM隔离与生命周期管理，所有逻辑封装在组件内部，避免全局DOM操作的冲突问题。组件内部通过自身上下文访问DOM元素，不再依赖全局选择器。

二、原有功能迁移步骤 #

1. 滚动关闭移动端菜单 #

在组件的生命周期钩子connectedCallback中绑定滚动事件，通过this.querySelector直接获取组件内部元素，无需全局查找：

class AppHeader extends HTMLElement {
  connectedCallback() {
    this.render();
    // 绑定滚动事件，注意绑定组件上下文
    window.addEventListener('scroll', this.handleScroll.bind(this));
  }

  handleScroll() {
    const mobileMenu = this.querySelector('.mobile-menu');
    if (mobileMenu?.classList.contains('open')) {
      mobileMenu.classList.remove('open');
    }
  }

  render() {
    this.innerHTML = `
      <nav class="header">
        <button class="menu-toggle" onclick="${this.toggleMenu.bind(this)}">菜单</button>
        <div class="mobile-menu">
          <!-- 移动端菜单内容 -->
        </div>
      </nav>
    `;
  }

  toggleMenu() {
    const mobileMenu = this.querySelector('.mobile-menu');
    mobileMenu.classList.toggle('open');
  }
}

customElements.define('app-header', AppHeader);

2. 响应式适配 #

同样在组件内部监听resize事件，在disconnectedCallback中移除监听避免内存泄漏：

connectedCallback() {
  // ...原有代码
  window.addEventListener('resize', this.handleResize.bind(this));
}

disconnectedCallback() {
  window.removeEventListener('scroll', this.handleScroll.bind(this));
  window.removeEventListener('resize', this.handleResize.bind(this));
}

handleResize() {
  const mobileMenu = this.querySelector('.mobile-menu');
  const isDesktop = window.innerWidth >= 768;
  
  if (isDesktop && mobileMenu.classList.contains('open')) {
    mobileMenu.classList.remove('open');
  }
  // 其他响应式调整逻辑，比如切换菜单布局
}

3. 激活当前菜单项 #

通过组件属性传递当前页面路径，利用attributeChangedCallback监听属性变化，自动匹配并激活对应菜单项：

class AppHeader extends HTMLElement {
  // 定义需要监听的属性
  static get observedAttributes() {
    return ['current-path'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'current-path') {
      this.setActiveMenuItem(newValue);
    }
  }

  setActiveMenuItem(path) {
    const menuItems = this.querySelectorAll('.menu-item');
    menuItems.forEach(item => {
      item.classList.remove('active');
      if (item.getAttribute('href') === path) {
        item.classList.add('active');
      }
    });
  }

  render() {
    this.innerHTML = `
      <nav class="header">
        <a href="/" class="menu-item">首页</a>
        <a href="/about" class="menu-item">关于</a>
        <!-- 其他菜单项 -->
      </nav>
    `;
  }
}

使用组件时，直接传入当前路径：

<app-header current-path="/about"></app-header>

或者在页面加载时通过JS动态设置：

document.querySelector('app-header').setAttribute('current-path', window.location.pathname);

三、大型原生JS应用的页眉实践 #

• 样式隔离：使用Shadow DOM隔离组件样式，避免全局样式污染。在connectedCallback中创建Shadow根：

  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        /* 组件内部样式，仅作用于组件内 */
        .header { display: flex; justify-content: space-between; }
        .active { color: #ff4400; }
      </style>
      <!-- 页眉HTML结构 -->
    `;
  }
  

• 状态共享：若需与其他组件共享状态（如用户登录状态），可通过自定义事件传递数据：

  // 在页眉组件中触发事件
  this.dispatchEvent(new CustomEvent('user-login', { detail: { username: 'xxx' } }));
  
  // 在其他组件中监听
  document.querySelector('app-header').addEventListener('user-login', (e) => {
    console.log(e.detail.username);
  });
  

• 拆分复用：将页眉拆分为子组件（如搜索框、用户菜单），在主页眉组件中引入，提升复用性与维护性。

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