Has anyone integrated an Elm element into Angular?

The best way to check is to set up that empty div, add an Elm program to it and then try create a huge diff to force Angular to compare all the children. You will see almost immediately what it does.

VDOM frameworks usually have to do these checks because otherwise you end up messing up input focus etc. So I would say Angular, considering how mature it is, is pretty clever around this, and when comparing a diff with an empty element simply ignores it. I agree though Angular forum might be best place to ask.

Very interesting - do you have an example? I’m curious in what situations this works, though AFAIK nothing in Elm’s official docs guarantee this either.

It’s just how Elm’s VDOM works, it sees an empty div and will leave it’s children alone because according to Elm, there are no children.

I posted recently talking about an example that uses this pattern. Can check it out here.

In Elm it’s basically this:

div [contentEditable True, data-lexical-editor="<lexical-state-managed-by-elm>"] []

Elm will faithfully compare attributes but preserve children, again, because according to elm there are no children. Meanwhile there is a full text editor working inside that div.