如何让带Shadow DOM的Web Components支持focus()、tabindex及文本高亮？

针对你遇到的「delegatesFocus阻止文本选择、移除后Tab需按两次」的矛盾，这里提供一套兼顾所有需求的实现方案：

核心方案：手动接管焦点逻辑，避免组件本身成为Tab焦点 #

放弃delegatesFocus，通过以下步骤实现所有需求：

1. 重写组件的focus()方法 #

直接将组件的focus()调用转发给内部原生input：

class YourCustomComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    // 渲染模板并获取内部input元素
    this.input = this.shadow.querySelector('input');
  }

  // 覆盖focus方法，直接聚焦内部input
  focus() {
    this.input.focus();
  }
}

2. 映射tabindex到内部input，组件本身设为不可Tab聚焦 #

把组件上的tabindex属性同步给内部input，同时将组件自身的tabindex设为-1（避免成为Tab键的焦点目标）：

// 监听tabindex属性变化
static get observedAttributes() {
  return ['tabindex'];
}

attributeChangedCallback(name, oldVal, newVal) {
  if (name === 'tabindex') {
    this.input.setAttribute('tabindex', newVal);
    // 组件自身设为不可通过Tab聚焦
    super.setAttribute('tabindex', '-1');
  }
}

connectedCallback() {
  // 初始化时同步tabindex
  const tabIndex = this.getAttribute('tabindex');
  if (tabIndex) {
    this.input.setAttribute('tabindex', tabIndex);
  }
  // 默认让组件不可Tab聚焦
  if (!this.hasAttribute('tabindex')) {
    super.setAttribute('tabindex', '-1');
  }
}

3. 确保文本可选中 #

由于没有启用delegatesFocus，Shadow DOM内的文本默认支持鼠标拖动选中，只需确保CSS没有设置user-select: none，也可以显式声明：

span /* 你的文本元素 */ {
  user-select: text;
}

4. 验证Tab键行为 #

组件自身tabindex="-1"会被Tab键跳过，焦点直接落到拥有正确tabindex的内部input上，无需按两次Tab。

完整可运行代码示例 #

class CustomInputWithText extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    
    shadow.innerHTML = `
      <style>
        .wrapper {
          display: flex;
          gap: 10px;
          align-items: center;
          padding: 6px;
          border: 1px solid #ddd;
          border-radius: 4px;
        }
        .label-text {
          user-select: text; /* 显式允许文本选择 */
        }
        input {
          border: none;
          outline: none;
          padding: 4px;
          flex: 1;
        }
      </style>
      <div class="wrapper">
        <span class="label-text">自定义标签：</span>
        <input type="text" placeholder="输入内容" />
      </div>
    `;
    
    this.input = shadow.querySelector('input');
  }

  static get observedAttributes() {
    return ['tabindex'];
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (name === 'tabindex') {
      this.input.setAttribute('tabindex', newVal);
      super.setAttribute('tabindex', '-1');
    }
  }

  connectedCallback() {
    const tabIndex = this.getAttribute('tabindex');
    if (tabIndex) {
      this.input.setAttribute('tabindex', tabIndex);
    }
    super.setAttribute('tabindex', '-1');
  }

  focus() {
    this.input.focus();
  }
}

customElements.define('custom-input-text', CustomInputWithText);

需求匹配验证 #

1. 调用组件.focus() → 内部input直接聚焦：通过重写focus()方法实现。
2. tabindex属性正常工作：组件的tabindex会同步到内部input，控制Tab顺序。
3. Tab键直接聚焦input：组件自身不可Tab聚焦，焦点直接跳转至内部input。
4. 文本可选中：未启用delegatesFocus，CSS确保文本可选择。

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