search

lit / lit-element

LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo.
https://lit-element.polymer-project.org
BSD 3-Clause "New" or "Revised" License
4.49k stars 319 forks source link

Focus handling in v3 #1078

Closed Christian24 closed 4 years ago

Christian24 commented 4 years ago

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 https://github.com/Polymer/lit-element/issues/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

justinfagnani commented 4 years ago

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: https://github.com/webcomponents/polyfills/issues/87