Chus

Chus

Using webcomponents library with phoenix 1.7

Hello.

I’m trying to use https://shoelace.style with Phoenix, the idea is use web components in client and hooks to interact with Phoenix.

I can see the component but the styles its impossible.

How is the way to use js and css from a component library in order to use easily in Phoenix 1.7?

Thanks

Most Liked

derek-zhou

derek-zhou

Phoenix is frontend pipeline agnostic. I’ve use it with webpack, snowpack, esbuild, Vite or no build step at all. Everything is possible; however, there may not be a step by step tutorial that match your needs exactly. IMHO, most tutorials off the internet are not very valuable; you are better off figuring it out on your own.

oleksify

oleksify

We use Shoelace with Phoenix. It’s working great, but you have to understand how web components works. Styling web components is different because they use Shadow DOM. Shoelace have a section in docs explaining that, but it’s general to all web components.

oleksify

oleksify

We do use it with LV. We did not hit this issue yet, also we’re not using Button component and we’re careful with attributes in general.

Everything has been working great so far. though it’s not that easy with LV. We build layer on top of Shoelace and our own web components. So, we have LV component wrapping Web Component and passing down the props, event handlers, etc. Then, we also add hooks for each components where we get passed down even names and add JS handlers for them or wire to Shoelace events. Or add event listeners for Shoelace events.

We did try GitHub - launchscout/live_elements: A library to make custom elements and LiveView so happy together · GitHub but decided to go on our own, to have more control over everything.

So far, web components (native custom elements) is the best thing (IMO) you can use for complex client-side UI in Phoenix.Mainly, because you slot html from phoenix inside and everything will just work. This is not possible with React and co, where you cant wrap some html from server with component - you have to pass everything through props, etc.

Where Next?

Popular in Questions Top

vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
beno
I will often find my self writing things similar to: case some_value do nil -> something() "" -> something() _ -> somethi...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
lucidguppy
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New

Other popular topics Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53690 245
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
AstonJ
Please see the new poll here: Which code editor or IDE do you use? (Poll) (2022 Edition) It’s been a while since we first asked this, I...
208 31142 143
New

We're in Beta

About us Mission Statement