LiveView Sticky DOM Operations Demo

The above div background-color is defined in CSS with an attribute query like this:

  [data-color='red'] {
    background-color: red
  }

It is first rendered with a server-side assign data-color={@color}, and it also shows in text the values of the @color assign in the server, and the data-color attribute in the client.

You can update the @color assign pushing server events with the buttons below:

You can update the data-color attribute 100% directly in the client with buttons below:

Notice how, once updated through the client, the data-color stops being patched with the value assigned to @color.

This happens because when JS.set_attribute/2 updates an element attribute in the client side, it sticks through re-renders no matter what the server-side assign may say!