Adding elements to DOM after initial page mount

[smessmer]

I have started to build leptos-twelements which is an open source integration of Tailwind Elements into the Leptos web framework. The goal is that users of the leptos framework can add this as a dependency and then use Tailwind Elements components by just adding them to their JSX (e.g. <Button />, <Input />, <Sidenav />, ...).

Doing so, I noticed that the elements aren't always initialized correctly. My best guess for the reason is that the leptos framework (similar to other frameworks like react) can change the DOM after the page already finished loading. Even if initialization is run when all components are already mounted, there might still be other elements added later by the framework (e.g. because a state change causes the rendering path to create a different set of components or because the client side router goes to a different page for a part or for all of the web app).

I don't want users of leptos-twelements to have to worry about initialization, I would like it to happen automatically for them. I'm currently using UMD for this because it was simpler, but I'm planning to change to ES later on, however, I don't believe that would change anything since there would still be cases where components are added after the initial page mount. To make it seamless, the best solution I came up with so far, based on your recommendation, is to inject a <script> tag after each tailwind element tag that then initializes this particular component (e.g. new Input(document.getElementById('my-input'))) but this seems like a sub-optimal solution.

It would be better if Tailwinds Elements would automatically detect when new components using data-te-xxx-init attributes are added to the DOM after the initial page mount, and then would automatically initialize them (in UMD mode just always automatically initialize, in ES mode obviously only automatically initialize if the element type matches one of the ones specified in the initial call to initTE and left over from treeshaking).

I believe this is a quite common issue for many web frameworks, since many of them allow DOM manipulations after the initial page mount, and will cause many users to stumble and wonder why things don't work if Tailwind Elements doesn't automatically initialize those.

[juujisai]

Enabling automatic component initialization via DOM change watchers would not be the most efficient approach. In situations where the DOM content undergoes changes, it's preferable for users to initialize needed components themselves. For a lot of frameworks that initialization can be done inside the methods that run when component is beeing mounted (React - useEffect, vue - onMounted).

We are currently focused on integrating Tailwind Elements with React. However, in the future, we plan to work on other frameworks aswell. Those frameworks will have a different way of initializing components.