Use a static property instead of ElementInternals.type for declaring native behaviors

[alexkeng]

This was raised by @sorvell in #11061 (comment)

Currently, one proposed approach to associate native behavior with an autonomous custom element is to set ElementInternals.type during construction (or connectedCallback if the behavior is based on a specific attribute of the custom element, eg. the type attribute in <x-button type=submit>):

class BehavesLikeButton extends HTMLElement {
    constructor() {
        super();
        this.internals_ = this.attachInternals();
        this.internals_.type = 'button';
    }
}

However, this introduces complexity to both the spec and implementations, particularly around cases where ElementInternals.type could change during the lifetime of the element. This mutability may not be necessary and could lead to ambiguity.

As an alternative, it may be cleaner to use a static property (e.g., behavesLike, name TBD) to declare the intended native behavior at definition time:

class BehavesLikeButton extends HTMLElement {
  static behavesLike = 'button';
}

Note this also means instead of supporting submit, reset, button for ElementInternals.type, a static behavesLike="button" would unify these under a single value. The specific behavior for submit/reset/button will be determined by the custom element's type attribute, just like with native <button> element, eg. <x-button type=submit> would have behaviors like a submit button, <x-button type=reset> would have behaviors like a reset button, and so on.

[Ayushsaxena0227]

should i start working on it @alexkeng