Consuming Web Components is very unergonomic

[ranile]

As I recently found out while writing a wrapper for Material Web Components, consuming web components in yew is far from an ergonomic and pleasant experience.

Problems I ran into

Note: all of these problems are not strictly related to Yew but I'm mentioning them in case someone else finds themselves stuck.

• Importing the component is very cumbersome (Unrelated to Yew)
• No way to listen to custom events exposed by custom elements #1777
• Inability to use type attribute
• onchange listener can't be on any element other than input textare or select #1776
• Bind to properties instead of attributes by default  #1322 (Difficult/impossible to set properties on elements)
• Implicit optional attributes #1637 Standard attributes can't be optional
• Passing and receiving values is a hassle at best (Unrelated to Yew)

Edit:
Updated to be used for tracking when all pain points identified are resolved :)

Details/proposed solutions

Importing the component is very cumbersome (Unrelated to Yew)

wasm-bindgen does this weird thing that when if the imported JS isn't used, it doesn't include in the binary. This becomes in a problem when all the JS needs to do is be imported to perform its function i.e. load the web component. This hack is required to have components to load (ranile/material-yew#1). This is non-optimal but there is nothing Yew can do about it.

Custom events

Yew should allow users to listen to custom events as well and pass CustomEvent to the callback.

There should be a way to deal with names like the ones used here. It can be a function on NodeRef or special syntax in html!, not 100% sure on the API.

Inability to use type attribute

The type attribute isn't set anything other than input and button elements. Currently, there is no error or any indication of what's wrong. Neither is this behavior documented. The mostly became an issue with mwc-textfield, mwc-textfield and mwc-drawer.
The type attribute should be set or at least it should raise an error if used in (currently) illegal places until it can be used be everywhere.

Inability to listen to change event

Passing onchange where its not allowed results in a panic: panicked at 'only an InputElement, TextAreaElement or SelectElement can have an onchange event listener'. This should be allowed.

Difficult/impossible to set properties on elements

Covered by #1322. This becomes especially apparent when it is required to set the property instead of attribute.

Standard attributes can't be optional

This issue comes up with the current implementation of optional attributes. This might be superseded by implementation, of #1550, not sure.

Passing and receiving values is a hassle at best (Unrelated to Yew)

This originates from converting values to and from JsValue. There were 2 big obstacles that I encountered:
Firstly, it was impossible to export structs and let web_sys handle this. More details here: rustwasm/wasm-bindgen#2322.
Secondly, closures were a pain to deal with, especially with signatures. For example, valitidyTransfrom textfield validation. I solved this by creating a JS type, wrapping a Rust struct around it and parsing the JsValue provided by the web component.

Finally, I'd like to thank @siku2 for their help with this. Without their help, I would not have been to get any of this work.

[jstarry]

Thanks for the write up @hamza1311

Custom events
Inability to listen to change event

Can you please create a new issue to track support for both of these?

Inability to use type attribute
Difficult/impossible to set properties on elements

Agreed that #1322 covers these

Standard attributes can't be optional

Agreed that the scope of #1550 should include this issue

[ranile]

Custom events
Inability to listen to change event

Can you please create a new issue to track support for both of these?

Just created #1777 and #1776