如何获取Shadow DOM中contenteditable <p>标签的光标索引

核心问题拆解 #

• Stencil组件开启shadow: true后，DOM被隔离，document.getSelection()无法正确定位shadow DOM内的选中元素
• shadowRoot.getSelection()为浏览器原生支持但TS未收录的API，导致编译报错
• textarea虽能正常获取选区，但无法满足富文本编辑需求

可行解决办法 #

办法1：类型断言绕过TS检查，直接调用shadowRoot.getSelection #

浏览器原生支持该API，仅需通过类型断言规避TS编译错误：

// 获取子组件实例
const paragraphEl = this.querySelector('document-paragraph');
if (paragraphEl) {
  // 类型断言绕过TS类型检查
  const selection = (paragraphEl.shadowRoot as any).getSelection();
  if (selection.rangeCount > 0) {
    const editableP = paragraphEl.shadowRoot.querySelector('p[contenteditable]');
    const range = selection.getRangeAt(0);
    const preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(editableP);
    preCaretRange.setEnd(range.startContainer, range.startOffset);
    const cursorPos = preCaretRange.toString().length;
    console.log('当前光标位置:', cursorPos);
  }
}

办法2：子组件封装光标获取逻辑，通过事件传递给父组件 #

将光标位置的计算逻辑封装在子组件内部，通过自定义事件穿透shadow DOM传递给父组件：

1. 子组件（document-paragraph）代码：

import { Component, h, Element } from '@stencil/core';

@Component({
  tag: 'document-paragraph',
  shadow: true,
})
export class DocumentParagraph {
  @Element() el: HTMLElement;

  // 封装光标位置计算方法
  getCursorPosition(): number {
    const editableEl = this.el.shadowRoot.querySelector('p[contenteditable]');
    if (!editableEl) return 0;
    const selection = window.getSelection();
    if (selection.rangeCount === 0) return 0;
    const range = selection.getRangeAt(0);
    const preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(editableEl);
    preCaretRange.setEnd(range.startContainer, range.startOffset);
    return preCaretRange.toString().length;
  }

  // 编辑时触发事件传递光标位置
  handleInput() {
    const pos = this.getCursorPosition();
    this.el.dispatchEvent(new CustomEvent('cursor-update', {
      detail: pos,
      bubbles: true,
      composed: true // 必须开启，让事件穿透shadow DOM
    }));
  }

  render() {
    return <p contenteditable onInput={() => this.handleInput()}></p>;
  }
}

2. 父组件（document-editor）监听事件：

import { Component, h, Listen } from '@stencil/core';

@Component({
  tag: 'document-editor',
  shadow: true,
})
export class DocumentEditor {
  @Listen('cursor-update')
  onCursorChange(event: CustomEvent) {
    const cursorPos = event.detail;
    // 这里更新父组件状态或执行相关逻辑
    console.log('光标位置更新:', cursorPos);
  }

  render() {
    return <document-paragraph></document-paragraph>;
  }
}

办法3：基于Range API的兼容处理 #

直接使用window.getSelection()配合Range API，无需依赖shadowRoot的非标准方法：

const editableEl = paragraphEl.shadowRoot.querySelector('p[contenteditable]');
const selection = window.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // 检查选中节点是否属于当前editable元素
  if (editableEl.contains(range.startContainer)) {
    const preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(editableEl);
    preCaretRange.setEnd(range.startContainer, range.startOffset);
    const cursorPos = preCaretRange.toString().length;
    console.log('光标位置:', cursorPos);
  }
}

注意事项 #

• 若contenteditable元素内有嵌套标签（如<b>、<span>），需递归计算光标位置，避免仅通过toString().length得到错误结果
• 务必在input、click、keyup等用户交互事件触发时获取光标位置，避免因时机错误返回0
• 跨shadow DOM传递事件时，必须设置composed: true才能让父组件接收到事件

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