What is the extent of web component support?

[gusty spade]

Web components can be used in dioxus like normal html elements, and props are simply quoted if they aren't known to dioxus. Slots can be used as expected, although the slot attribute isn't known to dioxus and must also be quoted.

But some web components also have custom events and/or methods defined. Currently, I am assigning the components unique id's, get the Element reference using web-sys, and add an event listener to that element with gloo. But that is very annoying and doesn't integrate well with dioxus' EventHandler, forcing wrapper components to use prop names not starting with on for the callbacks and requiring a custom static callback type.

I have noticed, that it is also possible to add a normal dioxus oninput listener to a web component, but is that really the same event as the component's custom input event? And even if so, the event data cannot be accessed.

As for web component methods, after obtaining a web_sys::Element instance as described above, it is possible to cast to a different type defined with wasm-bindgen, that has the methods. But that's still pretty cumbersome. And also how would a dioxus wrapper component expose these methods to users?

Also all this only works on dioxus-web (as I make heavy use of wasm-bindgen), which I don't think would have to be the case, but isn't a problem with me rn.

[tender wind]

You can create a custom element namespace as discussed here https://github.com/DioxusLabs/dioxus/tree/master/packages/html to make adding event listeners to your specific web component easier

[gusty spade]

ok thanks, that looks promising, but I'm not so sure as to how I should use it. What exactly does the volatile bool do, what is the purpose of the namespace string, and how would I define an event for, say, just the mwc-textfield element.

Slots can be used as expected, although the slot attribute isn't known to dioxus and must also be quoted.
Also I just noticed that the slot attribute is known by dioxus as a global attribute, just not on svg elements

[tender wind]

Volatile is mostly just for the value attribute. It makes the attribute be set every time the component is renderered regardless of if the value changed. The value of a text input can change without it changing in the VDOM which means we need to set it every time

The namespace is either None, or style for element styles

You can define a global event, but now that I look back at the code, there isn't a way to define an event for just one element. You can define an attribute for just one element. Feel free to open an issue

[gusty spade]

Volatile is mostly just for the value attribute. It makes the attribute be set every time the component is renderered regardless of if the value changed. The value of a text input can change without it changing in the VDOM which means we need to set it every time
got it, thanks

The namespace is either None, or style for element styles
it looked like all svg elements also have the namespace http://www.w3.org/2000/svg. and does some behaviour change when the namespace is set?

You can define a global event, but now that I look back at the code, there isn't a way to define an event for just one element.
hm, ok. either way here is what I currently have. maybe you have a better idea to do the event handling when seeing the code. otherwise I guess I'll open an issue.

[tender wind]

Namespaces are just matched here https://github.com/DioxusLabs/dioxus/blob/master/packages/interpreter/src/common.js#L33

Not sure why svgs have a different namespace... style is the only one that needs to exist