Focus handling in v3

[Christian24]

Description

Chrome provides a very handy field ShadowRoot.delegatesFocus. So far this is not part of the standard and only available in Chrome (according to MDN https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus). Since one of the ideas for v3 is to add

Common customization like shadowRoot rendering
To customize how the element’s shadowRoot is created you currently have to override createRenderRoot. We’d like to make this a bit easier and may add a decorator or static field with which you can supply the options object to attachShadow.
see @sorvell's post in #1077

it might make sense to improve ergonomics here too. This would probably not be part of the LitElement package, but maybe some other additional package, but I feel this would be useful to have resolved for both accessibility and keyboard navigation.

Maybe this could be polyfilled with a small footprint or some API abstraction is provided that allows to specify the element to delegate the focus to and and then just override focus()?

Example:

class MyComponent extends FocusableLitElement {

protected get delegateFocusTo(): Element {
    return this.querySelector('#foo');
}

}

I just feel it makes sense to achieve some sort of cross browser support.

Acceptance criteria

• Focus handling works in all supported browsers.

[justinfagnani]

We're already going to make it easier to set shadow root options without overriding createRenderRoot. So that's good :)

As for polyfilling, we would generally prefer to implement the native delegatesFocus feature in the web component polyfills. If that ends up being too costly, then maybe we'd consider something specific in LitElement. So for now, let's track this here: webcomponents/polyfills#87