Use the guide and read it
The first thing you should do is to check out “A Guide to Using Elm With Webcomponents”. This excellent guide touches on every subject that will come up when using web components, I wish it existed when I first got started. Pay close attention to the section “Gotchas”, because chances are good that you are going to break the Elm’s virtual DOM at some point, my advice is that if this happens it’s usually a sign that whatever custom element caused the breakage might be better off being broken down into a smaller components. Web components are for leaf nodes, not containers.
You don't need to use Shadow Dom or Template tag.
Most articles about web components really like to extol the virtues of shadow dom and kind of make it sound like the magic sauce that makes web components tick. I mean who doesn’t like total isolation as a virtue?
The problem with shadow dom is that it will block all external CSS styling meaning you can’t use CSS frameworks like Bootstrap or TailwindCSS.
**Not using Shadow dom means not being able to use
. Slot is only available to components that use Shadow dom**.
There is one exception to this. My understanding is that StencilJS which is a framework for creating web components will allow the use of slot without using Shadow dom, just understand that this is not the browser standard and is something specific to StencilJS.
Shadow dom becomes more useful the larger the developer audience a web component is designed for. If you’re on a small team working exclusively on an Elm app then you probably don’t need to Shadow dom. If you are building web components for use across an enterprise then it depends on how big the enterprise is, if you’re a small startup then probably not, if you are Saleforce then you probably want Shadow dom. If you are building web components to be used by developers outside your organization then you probably want to use Shadow dom, a good example is Google developing Material Design web components.
Web components that wrap a lot of functionality like a form probably will probably cause Elm Virtual Dom errors
One of my first experiements with web components was to see if I could pull off creating a login form component that I could use for both a Rails and an Elm app. I got it working with the Rails app no problem but with Elm there was Virtual DOM errors because I believe because the login form’s child nodes were being added to and removed.