JSFiddle - React, Tailwind, and code Playground

by Andrew Seier

HTML

<style>
  label {
    display: block;
  }
</style>

<form>
  <p>
    Clicking on the text ought to focus the label in both cases.
    It doesn’t work for form-associated custom elements.
  </p>
  <label>
    Label wrapping custom form element.
    <custom-text-input></custom-text-input>
  </label>
  <label>
    Label wrapping native form element.
    <input type="text">
  </label>
</form>

<script>
class CustomTextInput extends HTMLElement {
  static get formAssociated() {
    return true;
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<input type="text">`;
  }
}
customElements.define('custom-text-input', CustomTextInput);
</script>