Push JS Commands to the client

There is push_event/3 which you can use either with a hook or a global event listener.

If you use a hook, you can use the handleEvent function to set the attribute.

const AttributeHook = {
  mounted() {
    this.handleEvent("set_some_attr", data => {
      this.el.setAttribute(data.attr_name, data.value)
    }
  }
}

def mount(socket) do
  socket = push_event(socket, "set_some_attr", %{ attr_name: "foo", value: "bar" })
  {:ok, socket}
end

def render(assigns) do
  ~H"""
  <wc-drawer phx-hook="AttributeHook" />
  """
end

Or if you just want to do it on mount and not on a server event:

def render(assigns) do
  ~H"""
  <wc-drawer phx-mounted={JS.set_attribute({"some-attr", "some-value"}, to: "#some-id")} />
  """
end

Why does is_open needs to be a server state?

Thanks, I knew that actually. I did to much JS the last days, my head hurts.

It does not. But if I set it in a function-component it has to be in assigns.
Say sth is happening in the backend and I want to open a drawer in response.
How should I do that if not set the open-state for a specific drawer in the assigns of the LV?

push_event as @benlime showed. Letting Phoenix and some front-end code share control of an attribute is not the happy path imo.

sure, that refers to the question why is_open needs to be in the state (if I do not use push, put set an attribute in a function component)

Still, I’d use push_event/3 for that. You would have a handle_event or handle_info callback in your LiveView and then call push_event so the JS hook can set the attribute accordingly (or call drawer.open() or whatever code is needed to open the drawer client-side).