Focus — Apply Focus on Child & Delegate Focus

好，我们接着聊一下在 Lightning Web Components 里怎么管理自定义组件的焦点。这里有两种常用的模式，你一定要分清楚。 第一种，当你希望整个组件容器本身就能被聚焦，比如让用户在按 Tab 键时，焦点能落在一个大的区块上，并显示出焦点轮廓。这时候你可以在组件的宿主元素上加上 `tabindex='0'`。这种模式最合适那些整个组件本身就是一个交互实体的场景，比如说一张可点击的卡片。 第二种模式，是给那些包装了原生可聚焦元素的组件用的，比如自定义按钮。推荐的方法是给组件设置一个静态属性 `delegatesFocus` 并设为 `true`。这么一来，当你用 JavaScript 调用组件的 `.focus()` 方法时，焦点会自动落到影子 DOM 里第一个能聚焦的元素上。而且点击行为也会变得更智能：你在组件内部点击一个原本不能聚焦的区域，焦点也会自动移到第一个可聚焦元素上——这很像你点击 `` 时，焦点跑到它关联的输入框里一样。还有，`:focus` 这个 CSS 伪类也会作用在宿主元素上，这样你就可以很方便地给整个自定义元素写焦点样式了。 最后要提醒一下，千万不要把 `tabindex` 和 `delegatesFocus` 混在一起用，那样会打乱正常的焦点顺序。所以，根据你的组件到底是一个整体交互容器，还是内部有原生控件，选对其中一种模式就好。