How to create Custom Elements with Web Components Discussion

Interesting topic. Thanks for sharing!

Curious to see more examples. Chris, do you use any web components for GoRails or Jumpstart Pro?

Hey Chris,

I'm working with this right now and i've gone quite deep down the road to implement this. Glad you added the turbo stream logic there. I was still puzzling on how that one worked :). However i don't like having my javascript cluttered with HTML or most of the logic that creates the tags there. What would your approach be to keep the HTML out of the javascript so that one can keep my neat syntax hightlighting as well as ERB parsing alongside a proper seperation of concerns?

I've succesfully done so until i bumped into I18n. Which complicated the matter :D

Curious how you would

Hi, many thanks for this good input! Another, but much more feature-rich approach to build web-components, is to use svelte, with a option-tag like «<svelte:options customElement="my-custom-element" />», see: https://svelte.dev/docs/svelte/svelte-options. I love it and use it regularely because this are the very special points on your app where you can make it shine!

But, PROBLEM: on Web-Components, like you are describing as on Svelte, there is always this unpleasant «blink», but only on first-load, because Javascript first has to build the html while the rest of the page is delivered ready from the server. Only on first-load! When you navigate within the app the components are already built.

Soulution would be to build the components - (but only on first-load!) server-side. React-on-Rails https://github.com/shakacode/react_on_rails has a way for doing this (Svelte is a competitor of React). I didnt have time for dig in that but if this way is found and handy we can make stunning apps!