Re: [WICG/webcomponents] Form-associated custom elements: being a submit button (#814)

EisenbergEffect left a comment (WICG/webcomponents#814)

@alexkeng I would really like us to consider more scalable and extensible solutions than adding additional static members onto classes for every new behavior.

I would prefer that we see a more comprehensive set of examples, rather than handling every new platform behavior request as a one-off.

As an example, why not do something like this?

```js
import busttonStyles from "./ui-btton.css" with { type: "css" };

export class UIButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = "<slot></slot>";
    this.shadowRoot.adoptedStyleSheets.push(buttonStyles);
    this.attachInternals().behaviors.push(new HTMLButtonBehavior()); // this please
  }
}
```

In this case `HTMLButtonBehavior` is provided by the platform and any web component can just mix it in. The platform could provide other behaviors as well over time. This is fully extensible for the future and could be opened up for developers to write their own behaviors that can be mixed in.

Take this further and have a declarative mechanism for adding behaviors to any HTML element that maps an HTML attribute to an entry in a `customBehaviors` registry.

```js
export class MyBehavior extends HTMLBehavior {
  connectedCallback() { 
    // access to this.owner
  }

  disconnecteCallbac() { 
    // access to this.owner
 }
}

customBehaviors.define("my-behavior", MyCustomBehavior);
```

```html
<div behaviors="my-behavior">Div with custom behavior applied.</div>
```

Can we please explore a more modern behavior-oriented design that not only solves the button behavior issue but via the same mechanism addresses the multi-decade request that web devs have had for attachable HTML behaviors? We spoke about this at TPAC a couple of years ago and IIRC every single vendor was excited about the idea of behaviors. Why not connect the dots and handle these use cases in a unified way?

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

Message ID: <WICG/webcomponents/issues/814/3392480397@github.com>