Unable to set focus inside of Vue.js-based web components

[padcom]

Vue version

3.5.13

Link to minimal reproduction

https://github.com/padcom/vue-custom-element-delegates-focus

Steps to reproduce

npm install
npm start

What is expected?

Just the input is focused:

What is actually happening?

Observe that the whole element is focused instead of the input.

System Info

Google Chrome, Firefox - doesn't matter. It's a core deficiency of how Vue.js creates `shadowRoot`

Any additional comments?

This is a critical issue for any type of web component that provides users with interactions. It blocks proper keyboard navigation and programmatic focusing of elements.

More information

When creating custom web components that have focus-able parts (like inputs or buttons) the focus is first set to the custom element itself. That is why, in the example provided, the outline is showing for the entire element instead of the input.

To be able to focus elements inside the web component one needs to add the delegatesFocus to options alongside mode: 'open'. This, when the focus() method is called on the web component, will look for the first focus-able element and shift the focus there instead.

MDN: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus

There are more options that can be set when creating the shadowRoot using this.attachShadow() call, but delegatesFocus is the key for focusing subelements.