ElementInternals API support

[Qsppl]

Hi, I can't create form associated element via Hybrids.js.

Here is the description of this API in MDN: ElementInternals.

Here is an example of an element associated with a form taken from this MDN guide:

ElementInternals - form associated element

customElements.define(
  "my-form-associated-input",
  class extends HTMLElement {
    static formAssociated = true;

    constructor() {
      super();
      this._internals = this.attachInternals();
    }

    connectedCallback() {
      this.attachShadow({
        mode: "open",
        delegatesFocus: true
      }).innerHTML = `<input type="text" />`;
    }
  }
);

In the example I created an element that is activated by clicking on the , which is impossible to implement with regular web components.

[smalluban]

Currently, ElementInternals API is not supported. As this requires changes to the base element class definition, I am unsure how to integrate this with hybrids, as the library's main goal is to detach from the definition and have only a common one.

However, as custom elements API was designed to make ordinary elements, nothing stops you from mixing "raw" custom elements (or built with another library) with those defined by hybrids - they are all the same.

I have found a very useful pattern to wrap native <input> elements with a custom one to add visuals and logic:

<ui-input ...>
  <input name="" value="">
</ui-input>

The <input> can be exchanged with your "raw" custom input, etc...

[Qsppl]

The Hybrids.js library is unique in that it provides all the capabilities of modern web frameworks without the need to build a project, JSX and other dirt. In some projects, this library is simply irreplaceable.
And adding Lit to the project just to write interface elements is too expensive. It will be easier to add functionality to Hybrids.js

[smalluban]

I really don't mind adding support for ElementInternals API, but I am not sure how to do it right ;)

[Qsppl]

Maybe reserve a third field of the component definition - internals? Users will be able to pass there a configuration, like:

    internals: { formAssociated: true }

[smalluban]

To use the ElementInternals API, you must do much more than set the flag (I expect that you are aware of that). I know that this is also required, but it should not be separated from the definition - you can not use that without adding API calls as well as without setting the static property formAssociated.

In my opinion, it must bea special property with some meta definition, to which property you want to connect the value passed to the form, validation, etc..., so ma ore complex solution, which does everything for you, like:

{
  [form.connect]: {
      value: 'myProperty' // expect that for default should be `value`
      validate: (...)=> ...,
      ...
  },
  render: () => html`...`,
}

However, I never had a problem with just wrapping the native input element (especially for rendering purposes) with a custom element, like:

  <my-input>
    <input ... />
  </my-input>

You can style, add custom logic, structure in shadow DOM... and if the <input> is in the same subtree as the form, everything works as expected. I expect that this feature is more for web components library authors, as this simplifies the usage.

[Qsppl]

I have a component library that's used not only by front-end developers but also by back-end developers. For them to use this component library, it's crucial that using it is extremely straightforward.

They will use the UI-Kit if it’s as simple as using regular HTML elements:

<label><vp-checkbox checked></vp-checkbox> Remember me </label>

But they won't use it if they have to do something like:

<label>
    <vp-checkbox checked>
        <input ?checked? type="checkbox"/>
    </vp-checkbox>
    Remember me
</label>

When creating solutions for other developers, it’s important to hide implementation details as much as possible to ensure the solutions are simple and convenient to use, that's why ElementInternals API support is so important to me