I’ve been doing some work with web components and elm. I’ve had some success but I’ve ran into a bit of a hurdle.
I’d like to use the slot feature of a web component as part of it’s API. There’s a useful event called slotchange but I can not figure out how to get it to fire. It only fires if I add/remove (replace) a slot DOM Node. This is easy enough to do in Javascript, but with Elm managing the DOM I can not figure out how to do it in Elm.
I thought about trying the Html.Keyed but if I understand correctly what that does, is it’s all about making fewer DOM changes not more.
If you’re not sure exactly what I’m talking about I made an example to try to isolate this issue as much as I could. I’m not sure how much the code “speaks for it self” though, so I’d be happy to supply any additional details.
Note: the slotchange event doesn’t fire if the children of a slotted node change — only if you change (e.g. add or delete) the actual nodes themselves.
It should be sufficient to use Html.Keyed and just use a different key when you want the event to be fired. The event isn’t fired because Elm’s VDOM recycyles DOM nodes where it can.
Thanks so much. Using Html.Keyed totally worked. I updated my example in case any one else has the same issue they can see a solution. Now to try to apply this to my real problem.
