I tried to use the ui5 webcomponents together with elm, to achieve a better look of my app. While buttons work as expected, the input-fields are throwing some errors, after removed form the screen. How can I check, whether a web-component will work together with elm or not, before implementing test-code?
Do you have any suggestions for a similar library? Support for localization (e.g. input of dates) and mobile devices is on the wish list.
The thing about using web components and elm is to understand the web component cannot modify th dom outside itself and that Elm must be the single source of all state (including the state of the DOM).
So consider the case where you are throwing errors when an input field is being removed from the screen, was the disappearance of the input field something that happened through Elm? Is Elm aware that the dom changed? I don’t know if this makes sense but if your web components is affecting the dom tree outside of itself (including making itself disappear) then there will be a disparity between the new DOM and the virtual Dom that elm is using and this is the source of errors like this.
What you want to do is consider that all state including the state of the DOM need to go through Elm, it’s tricky at first and I ran into these same issues when I started using web components. I also found it helpful to make sure that anything that input needs from elm is passed to the component via attributes and that the component can dispatch any changes to elm via events. Also components must be leaf components that do one small discrete thing.
I found creating my own custom element and having it interact with elm went a long way towards understanding how web components and elm can coexist. It’s a lot of work up front but once you manage it I think it’s worth it and I find web components quite useful.
Thanks for offering help. Today I tmade a simple example, but this works as expected. I removed the code from the big app, so I have not keep the detailed error-message. I will try with the complete app tomorrow.
Ok, this makes a lot more sense. Both Browser.document and Browser.application take over the entire <body /> of the page. Depending on what you’re building, you could use Browser.element if that works for you, or you could find 1 of the approaches for modifying the compiled Elm so that it doesn’t take over the whole <body />. Or maybe figure out why that <ui5-static-area> is being added and try to have it not be added. There are a few paths to pursue!
Yep! Either use Browser.element, or once your app grows and you decide you need Browser.document or Browser.application then you can run a script to modify the Elm output to not take over the whole <body />. But it’s probably best to start with Browser.element.