如何获取跨多层Shadow DOM节点的文本选择范围？

当选择跨越多个带有Shadow Root的节点文本时，默认的window.getSelection().toString()无法返回完整内容，这是因为Shadow DOM的隔离机制导致浏览器将跨Shadow的选择拆分为多个独立Range，而默认方法仅能获取部分内容。

解决方案一：兼容所有浏览器的遍历方法 #

通过遍历Selection的所有Range，逐个提取每个Range的文本并拼接，确保覆盖所有Shadow DOM内的选择内容：

// 获取完整选择文本（兼容所有支持Shadow DOM的浏览器）
function getFullSelectionText() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return '';
  
  let fullText = '';
  for (let i = 0; i < selection.rangeCount; i++) {
    const range = selection.getRangeAt(i);
    fullText += range.toString();
  }
  return fullText;
}

解决方案二：使用现代浏览器的组合Range API #

Chrome等现代浏览器支持Selection.getComposedRanges()方法，该方法会自动处理Shadow DOM的组合逻辑，返回跨越Shadow的完整Range集合：

// 获取完整选择文本（现代浏览器优化版）
function getFullSelectionText() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return '';

  // 优先使用getComposedRanges处理Shadow组合
  if (typeof selection.getComposedRanges === 'function') {
    const composedRanges = selection.getComposedRanges(document);
    return composedRanges.reduce((text, range) => text + range.toString(), '');
  }

  // 降级到遍历Range的兼容方法
  let fullText = '';
  for (let i = 0; i < selection.rangeCount; i++) {
    fullText += selection.getRangeAt(i).toString();
  }
  return fullText;
}

测试示例 #

将上述函数应用到你的场景中，选中跨两个Shadow节点的文本后调用即可获取完整内容：

// 原场景节点创建
const inner = document.createElement("span");
inner.attachShadow({ mode: "open" }).innerHTML = "inner";

const outer = document.createElement("span");
outer.attachShadow({ mode: "open" }).append("outer ", inner);

document.body.append(outer);

// 选中"outer inner"后调用
console.log(getFullSelectionText()); // 输出完整的"outer inner"

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