The `delegatesFocus` option on shadow root attachment lets the browser automatically handle focus routing for simple wrapper web components. When enabled, clicks on the host element forward focus to the first focusable element inside the shadow root, the host matches `:focus` CSS pseudo-class when an internal element is focused, and dead focus zones are eliminated. The post walks through how to opt in using Lit's `shadowRootOptions`, which components benefit (single-focusable-element wrappers like buttons, inputs, selects), which should not use it (roving tabindex, multi-target, or custom pointer components), and a key pitfall of adding `tabindex="0"` to the host alongside delegation. It also clarifies that `delegatesFocus` does not handle event bubbling, so focus/blur re-dispatch handlers must be retained.
Table of contents
What delegatesFocus DoesOpting-In with LitWhen to Use It, and When Not ToWhat We Changed in AgnosticUIConclusionSort: