msaraiva
Scoped CSS styles for live components
Hi folks!
I wonder if any of you have already tried to implement scoped CSS styles for live components. I’m specifically interested in how would be the best way to handle dynamic styles (styles that need to be updated when a related assign changes).
This feature seems to be quite popular among frontend devs using React and friends. It’s also one of the most requested features for Surface.
I was reluctant to implement something like that on top of LV but after talking to a few people I was convinced that this might be a good fit for live components.
An initial proposal has been submitted along with a PoC project, so if you’re interested in the subject, feel free to give it a try and share your thoughts.
Some questions I still have:
- How beneficial is using this approach comparing with other solutions?
- What are the downsides and limitations?
- Should/could this be implemented as a separate lib so any project using LiveView could benefit from?
In case you’re curious, here’s how it looks like:
Full source code can be found here.
Cheers.
Most Liked
trisolaran
Resurrecting this topic 
Is there a plan to bring scoped CSS styles to LiveView components (without Surface)?
Are there any good workarounds?
Cheers!
gdub01
My only feedback is that this looks awesome =)
Separating the static and dynamic parts is phenomenal in terms of optimization.
Having styles locally scoped is also amazing.
Having the option to apply a function to it is also great. I’m thinking of a theme option where you can pass ‘primary’ as a dynamic color and lookup a user’s setting to get what their primary color actually is potentially.
The only question I have is regarding the var(--my-color). If I define a global root var like ‘primary-color’ outside of surface/scoped styles, and don’t pass a style var, I’m still able to use it like border: solid 3px var(--primary-color) and it’ll pick up the globally set css variable of:
:root {
--primary-color: coral;
}
?
msaraiva
An update on that can be found here Scoped CSS by msaraiva · Pull Request #621 · surface-ui/surface · GitHub.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Move fast and fix things! Error tracking with less noise for Elixir devs who love to ship. Start your free dev account.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #hex
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"