Shadow DOM可阻止样式泄露但无法阻止脚本泄露，有什么解决办法？

Shadow DOM 仅负责隔离自定义组件的DOM结构和CSS样式，不会干预JavaScript本身的作用域规则：如果组件内的函数定义在全局作用域、或是直接挂载到自定义元素的公开实例属性上，自然会被主DOM的上下文访问到。以下是可落地的修复方案：

• 使用块级作用域/IIFE封装组件全量逻辑
  将组件的所有脚本逻辑包裹在块级作用域或立即执行函数中，内部声明的函数、变量默认不会暴露到全局上下文，示例代码：

  // 组件脚本内部
  {
    // 仅当前块内可访问的内部函数
    function handleInnerClick() {
      console.log('组件内部逻辑，全局无法调用')
    }
    class MyCustomCard extends HTMLElement {
      connectedCallback() {
        this.attachShadow({mode: 'open'})
        this.shadowRoot.innerHTML = `<button>组件按钮</button>`
        this.shadowRoot.querySelector('button').addEventListener('click', handleInnerClick)
      }
    }
    customElements.define('my-custom-card', MyCustomCard)
  }
  

• 用ES类私有字段存储内部方法
  不要把组件内部方法挂载到this实例的公开属性上，改用ES6+支持的类私有字段（#开头命名），这类属性天然无法被外部上下文访问，示例代码：

  class MyCustomCard extends HTMLElement {
    // 私有方法，仅类内部可调用
    #computeInnerStyle() {
      return 'color: #333; padding: 12px;'
    }
    connectedCallback() {
      this.attachShadow({mode: 'open'})
      this.shadowRoot.innerHTML = `<div style="${this.#computeInnerStyle()}">卡片内容</div>`
    }
  }
  customElements.define('my-custom-card', MyCustomCard)
  

• 按需将Shadow DOM设为closed模式
  声明Shadow DOM时设置attachShadow({mode: 'closed'})，主DOM将无法通过自定义元素实例的shadowRoot属性获取内部Shadow根节点，可避免外部直接操作内部DOM绑定的事件和属性。注意该模式仅限制Shadow根的访问，仍需要配合作用域封装使用，且组件内部需要自行存储Shadow根的私有引用，方便内部逻辑调用。

• 使用ES模块规范组织组件脚本
  ES模块天然拥有独立的模块作用域，模块顶级声明的变量、函数默认不会泄露到全局上下文，优先用import/export管理组件的依赖和对外暴露的接口，不要随意给window对象挂载全局属性和方法。

若你使用的第三方组件存在脚本泄露问题，可优先检查组件源码是否遵循作用域封装规范，通过包一层作用域的方式即可快速修复泄露问题。

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