Morph Refresh Breaks Web Component Styles

[modagavr]

Using morph refresh method (turbo 8 beta + turbo-rails 2 beta)

Using shoelace web components library

turbo_stream_from @conversation
with broadcasts_refreshes in Conversation model

buttons and other web component elements become ugly

how it should look like and how it properly works with current latest stable packages (turbo 7 + turbo-rails 1.5)

[modagavr]

Maybe idiomorph doesn't work well with Shadow DOM or something like that

[kotogavr]

+1
I have the same problem with the same setup.

[KonnorRogers]

Hi there! Shoelace maintainer here 👋. The problem exists because morphing libraries never re-run the constructor function of the web component so it ends up not having the expected default properties.

there's a pretty lengthy discussion here:

stimulusreflex/stimulus_reflex#511 (comment)

the TLDR is that you need to provide all default attributes for the component up front in your server rendered HTML for it to work out of the box as expected.