必须在 attachshadow 时声明 delegatesfocus: true，否则焦点无法进入 shadow dom；该参数不可后续修改，且仅响应点击不接管 tab 导航，需配合 tabindex 和手动 focus/blur 同步实现完整可访问性。
attachShadow 时必须声明 delegatesFocus，否则焦点进不去
Shadow DOM 默认不委托焦点，即使内部有 <input>，点击宿主也不会自动聚焦。唯一生效方式是在创建 shadow root 时传入 { mode: 'open', delegatesFocus: true } —— 这个参数不可后续修改，shadowRoot.delegatesFocus = true 完全无效。
常见错误是先挂载再补设，结果 Tab 键卡在宿主外、鼠标点击无响应。必须写成：
class MyInput extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open', delegatesFocus: true });
}
}
- 只对
<div>、自定义元素等支持 Shadow 的宿主有效；<code><input>、<img>等调用会直接抛DOMException -
mode: 'closed'下delegatesFocus仍起作用，但无法调试，建议开发阶段坚持用'open' - 若用 React 或 Vue 封装 Web Components，确认其底层是否透传该参数（比如某些 Shadow 库默认关掉）
- 给宿主加
tabindex="0"（允许 Tab 进入）或tabindex="-1"（仅支持程序聚焦） - 确保 shadow 内部存在且仅有一个“主控件”，避免多个
<input>或tabindex="0"元素并存，否则委托目标不确定 -
display: none的元素会被跳过；visibility: hidden的则可能被聚焦（但 UX 差）
delegatesFocus 只响应点击，不接管 Tab 导航
设了 delegatesFocus: true 后，用户点击宿主空白区，焦点才会跳进 shadow 内第一个可聚焦元素（如 <input>、<button></button> 或 tabindex="0" 的 <div>）。但它完全不影响 Tab 键顺序：Tab 仍按文档流走，不会自动“跳进” shadow 内部。
<p>这意味着，如果宿主本身没设 <code>tabindex，键盘用户按 Tab 永远到不了它——哪怕内部有输入框。必须手动让宿主可聚焦：
focusin 事件不穿透 Shadow 边界，得手动同步状态
focusin 和 focusout 能冒泡，但只在各自 shadow tree 内有效——宿主监听不到内部 <input> 的聚焦事件。想让宿主响应“内部获得焦点”，必须在 shadow 内部监听并显式通知：
const input = this.shadowRoot.querySelector('input');
input.addEventListener('focus', () => this.setAttribute('focused', ''));
input.addEventListener('blur', () => this.removeAttribute('focused'));
这样 CSS 才能用 :host([focused]) 做视觉反馈。漏掉这步，:focus-within 在旧版 Safari 中可能失效，且屏幕阅读器无法准确播报聚焦状态。
- 不要依赖
this.shadowRoot.addEventListener('focusin', ...)——它捕获不到子元素的focusin，因为事件还没冒泡出 shadow boundary - 避免在
focus处理器里反复调用input.focus()，Safari 可能触发无限循环 - 若组件含多层嵌套 Shadow（如
<my-form></my-form>→<my-input></my-input>），delegatesFocus不穿透，需在外层监听后手动.focus()到下一层
动态插入内容后 focus() 失效，要用 requestAnimationFrame
在 shadow root 里用 innerHTML 或 appendChild() 插入新节点后，立刻调用 .focus() 很可能失败——浏览器还没完成渲染或焦点管理未就绪。
正确做法是延迟一帧：
const input = document.createElement('input');
this.shadowRoot.appendChild(input);
requestAnimationFrame(() => input.focus());
- 不用
setTimeout(..., 0)：它不保证 DOM 渲染完成，比requestAnimationFrame更不可靠 - 对 Shadow DOM 内元素，同样适用；但要确保
shadowRoot已挂载（比如在connectedCallback里操作） - 若用了
focus-trap，需配tabbableOptions: { getShadowRoot: true }，否则它查不到 shadow 内的可聚焦节点
focus/blur 监听。少写一行，键盘用户就卡住，屏幕阅读器就失语。
