DelegateInputSelectionMixin

Overview

Purpose: Help components built around an inner input element provide .

This mixin makes it easy for you to support the complete set standard DOM APIs for selecting text by delegating those methods to an inner input-type element.

This mixin works near the start of the Elix render pipeline:

events → methods → setState → render DOM → post-render

Expects the component to provide:

• [internal.inputDelegate] getter that returns an input-compatible element in the component's shadow tree.

Provides the component with:

• select, selectionEnd, selectionStart, setRangeText, setSelectionRange methods that forward to the delegated input.

Usage

import DelegateInputSelectionMixin from "elix/src/base/DelegateInputSelectionMixin.js";
import html from "elix/src/core/html.js";
import internal from "elix/src/base/internal.js";
import ReactiveElement from "elix/src/core/ReactiveElement.js";

class MyElement extends DelegateInputSelectionMixin(ReactiveElement) {
  // Identify the input element that will receive standard selection API calls.
  get [internal.inputDelegate]() {
    return this[internal.ids].input;
  }

  get [internal.template]() {
    return html`
      <input id="input" />
    `;
  }
}