Shadow DOM内跨元素无法选中文本的问题排查与解决咨询

当你在contenteditable元素内使用带Shadow DOM的自定义元素时，跨元素选中文本失败的核心原因是Shadow DOM的边界隔离机制。Shadow DOM创建了一个独立的DOM子树，与主文档DOM上下文相互隔离，浏览器的文本选区系统默认无法跨越这个边界——主DOM的选区和Shadow DOM内的选区属于不同的上下文，因此无法直接合并跨边界的文本选择。

针对你的场景，有两种可行的解决思路：

思路1：移除Shadow DOM（最简单） #

如果你的自定义元素只是需要简单的样式包裹，完全可以不用Shadow DOM，直接在自定义元素内部添加元素并设置样式，这样内容就处于主DOM上下文，选区可以正常跨元素：

window.customElements.define('c-text', class extends HTMLElement {
  constructor() {
    super();
    const wrapper = document.createElement('div');
    wrapper.style.border = '1px solid black';
    // 将原节点的子元素移到wrapper中
    while (this.firstChild) {
      wrapper.appendChild(this.firstChild);
    }
    this.appendChild(wrapper);
  }
});

思路2：保持Shadow DOM但调整结构（适合需要样式隔离的场景） #

如果必须保留Shadow DOM，可以让Shadow DOM内的容器继承外部的contenteditable状态，确保文本处于同一个编辑上下文：

const template = document.createElement('template');

template.innerHTML = `
    <style>
    div { border: 1px solid black; }
    </style>
    <div contenteditable="inherit"><slot></slot></div>
`;

window.customElements.define('c-text', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
});

注：这种方式在部分浏览器中可能存在兼容性差异，最稳妥的方案还是思路1。

修改后的完整示例：

<div class="content" contenteditable>
  <p>现在可以正常选中'hello'和'world'了</p>
  
  <c-text>
    <p>hello</p>
    <p>world</p>
  </c-text>
</div>

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