Consuming Web Components is very unergonomic #1666
Description
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
typeattribute -
onchangelistener 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: wasm-bindgen/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.