Managing Focus

To improve the authoring experience and accessibility for keyboard users, the widget should react sensibly when receiving focus.

focus(): Handle when the widget receives focus

A simple way of handling focus is delegating the focus to a child element.

In our example, we implement focus() on the element such that the textarea is focused when the widget is focused:

export default class CoolWidget extends LitElementWw {

  @property({attribute: true})
  value: string

  @property({attribute: true})
  placeholder: string

  textarea: HTMLTextAreaElement

  focus(options: FocusOptions) {

  static get styles() {
    return css`
      :host([editable]) .placeholder {
        display: none;

      :host([printable]) textarea {
        border: 2px solid black;
        border-radius: 2px;

  render() {
    return html`
    <input part="action" class="placeholder" @change=${e => this.placeholder =}></input>
    <textarea @change=${e => this.value =} placeholder=${this.placeholder}>