LiveView and Web Components
Comments welcome! View the code-sync tag for more Code Sync talks!
5 Likes
.. plus, assuming you need some client-side state dependent template rendering in an actual Phoenix LiveView app:
- shadow DOM + id a must unless you want to use the
phx-update="ignore" - importing (a copy of) the tailwind sheet and having the render root adopt it when you need the same styling as throughout the rest of the app
- in dev, listening to app.css getting changed by tailwind and rebuilding app.js if you need to add tailwind classes to custom elements that don’t yet exist elsewhere on the fly
- writing your own directives to supplement Lit (e.g. for window events)
- …
Web components are truly awesome because there’s virtually nothing you can’t do client-side in an elegant and future-proof way.
3 Likes
