LitElement项目中打开菜单时为body添加CSS类的实现方法

方案1：利用Menu组件生命周期直接操作全局样式（最简便） #

因为你的菜单逻辑是「打开即创建组件、关闭即销毁组件」，刚好可以复用Lit组件自带的生命周期钩子，不需要额外跨组件通信：

• 在Menu组件的connectedCallback（组件挂载到DOM时触发）给body添加overflow: hidden
• 在Menu组件的disconnectedCallback（组件从DOM销毁时触发）移除该样式

代码示例：

import { LitElement } from 'lit';

class AppMenu extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    // 禁止页面滚动，部分设备需同时给html设置可根据实际情况调整
    document.body.style.overflow = 'hidden';
    // 可选：处理滚动条消失导致的页面横向偏移
    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
    document.body.style.paddingRight = `${scrollBarWidth}px`;
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    // 恢复页面滚动
    document.body.style.overflow = '';
    document.body.style.paddingRight = '';
  }

  // 关闭按钮逻辑示例
  #handleClose() {
    // 销毁组件，自动触发disconnectedCallback
    this.remove();
  }
}

customElements.define('app-menu', AppMenu);

跳转页面时组件会自动销毁，不需要额外写逻辑处理。

方案2：通过全局状态管理同步状态（适合多节点控制菜单的场景） #

如果你的项目已经接入了全局状态管理，或者有多个入口需要控制菜单开关，可以用该方案：

• 新增全局状态menuOpen，默认值为false
• 汉堡按钮点击创建Menu组件时，将menuOpen设为true
• 菜单关闭/页面跳转销毁组件时，将menuOpen设为false
• 在根组件监听menuOpen的变化，动态给根容器/body设置overflow属性

如果用Lit原生能力可以用Context API实现跨组件状态传递，不需要引入额外第三方库。

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