Web-components interop (childNode issues)

in regard to childNodes issue raised in the past (i.e. JavaScript Exception: Cannot read property childNodes of undefined, with extension Dark Reader) I believe thats something worth to at least figure out reasonable proposal.

I was playing recently to create an ionic framework app using elm (https://github.com/ciekawy/diegy). As new ionic is based on web componets some of them are (i.e. ion-item, ion-header) complex in the way the internal effective DOM may change based on data binded into the web component. This lead to elm loosing traction of original DOM structure and raising "Cannot read property 'childNodes' of undefined". It perfectly make sense for elm to its principles and architecture. OTOH with rise of new standards and frameworks would be great to have some common way to coexist. That was great move from ionic framework to become framework-agnostic and leverage web-componets as one factor to acheive the goal - unfortunately there is still a blocker to integrate well with elm-lang.

We’ve done some proof-of-concept experiments embedding web components in Elm apps at work and haven’t seen this, but I’m wondering if we missed a use case. Do you have any examples of specific ionic components that cause issues?

as mentioned above - ion-header or ion-item are the examples. Also here is ionic ticket for reference.

To solve this issue I believe some conversation would help between ionic and elm devs. Would be awesome to make it working.

Oh, sorry! I don’t know how I missed your examples in the original post. My mistake. That issue was quite enlightening though. It looks like the problematic elements are altering their external-facing DOM, which was originally written by Elm. I’d consider that a bit of a web component anti-pattern, but it’s good to see how it happens in iconic. We’re using Stencil to build web components at work, and I expect some of them to be used with Elm. Now I know to watch out for uses of hostData in PR’s. Thanks for the details!