You don't necessarily have to do focus handling yourself with shadow DOM web components. For simple wrapper components, there is an easier (and better) way.

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

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.

Shadow DOM Focus Delegation: Getting delegatesFocus Right – Frontend Masters Blog