如何防止Shadow Root中获焦元素清除宿主页面的用户选区？

Shadow Root 默认不具备 iframe 那样的完全环境隔离特性，文本选区的全局共享是浏览器的默认机制，但可以通过事件拦截与选区状态的保存/恢复来实现你需要的选区隔离效果。

核心思路 #

浏览器聚焦输入类元素时会自动清除全局文本选区，我们需要在 Shadow Root 内的交互事件触发前，先保存宿主页面的当前选区，待 Shadow 内的交互完成后再恢复该选区。

具体实现代码 #

class IsolatedInput extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const input = document.createElement('input');
    input.type = 'text';
    
    // 存储宿主选区的变量
    let hostSelection = null;

    // 拦截点击输入框的初始事件
    input.addEventListener('mousedown', (e) => {
      // 保存宿主页面的当前选区
      const globalSel = window.getSelection();
      if (globalSel.rangeCount > 0) {
        hostSelection = globalSel.getRangeAt(0).cloneRange();
      }
      // 阻止事件冒泡到宿主，避免触发默认选区清除逻辑
      e.stopPropagation();
    });

    // 输入框聚焦完成后恢复宿主选区
    input.addEventListener('focus', () => {
      if (hostSelection) {
        const globalSel = window.getSelection();
        globalSel.removeAllRanges();
        globalSel.addRange(hostSelection);
        hostSelection = null;
      }
    });

    // 覆盖Shadow内其他交互场景，比如点击空白区域
    shadow.addEventListener('pointerdown', (e) => {
      if (!e.target.matches('input')) {
        const globalSel = window.getSelection();
        if (globalSel.rangeCount > 0) {
          hostSelection = globalSel.getRangeAt(0).cloneRange();
        }
        e.stopPropagation();
      }
    });

    shadow.appendChild(input);
  }
}

customElements.define('isolated-input', IsolatedInput);

关键说明 #

• 拦截 mousedown 事件是关键：这是触发浏览器默认选区清除的前置节点，提前保存宿主选区并阻止事件冒泡，能避免全局选区被自动清除。
• 聚焦后恢复选区：确保宿主页面的文本选中状态不会因Shadow内的操作丢失。
• 扩展事件拦截：覆盖pointerdown等事件，可以处理Shadow内非输入框的交互场景，实现全方位的选区隔离。

注意事项 #

• 该方案适用于open模式的Shadow Root；closed模式下无法通过外部脚本操作全局选区，但内部事件拦截逻辑依然生效。
• 若Shadow Root内有多个可交互元素，需要统一添加事件处理逻辑，避免遗漏场景。

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