Re: [WICG/webcomponents] Allow a click on label associated with custom element to focus the custom element (#891)

Any updates on this one? I was trying to leverage the native form ecosystem, but am getting hung up on some of the details.

Here’s another dead-simple [repro](https://jsfiddle.net/theengineear/jpr5hvbu) — in my case even a direct parent / child wrapping of a `label` around a form-associated custom element appears not to work.

![label-for-form-associated-custom-element](https://github.com/WICG/webcomponents/assets/6611546/158bffb7-0aa8-4e29-b92f-1539c2184cb8)

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>label for form-associated custom elements</title>
  </head>
  <body>
    <form style="display: flex; flex-direction: column; width: 440px;">
      <p>
        Clicking on the text ought to focus the label in both cases.
        It doesn’t work for form-associated custom elements.
      </p>
      <label style="display: block;">
        Label wrapping custom form element.
        <custom-text-input></custom-text-input>
      </label>
      <label style="display: block;">
        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>
  </body>
</html>
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/891#issuecomment-1899304482
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/891/1899304482@github.com>

Received on Thursday, 18 January 2024 22:14:07 UTC