Event

    <.dialog class="dialog" on_open_change="dialog_open_changed">
  <:trigger>Open</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

  

    def handle_event("dialog_open_changed", %{"open" => open, "id" => id} = params, socket) do
  IO.inspect(params, label: "dialog_open_changed")
  {:noreply, socket}
end
  

    <.dialog id="dialog-events-client" class="dialog" on_open_change_client="dialog-open-changed">
  <:trigger>Open</:trigger>
  <:title>Lorem ipsum dolor sit amet</:title>
  <:description>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</:description>
  <:content>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

  

    const el = document.getElementById("dialog-events-client");
el?.addEventListener("dialog-open-changed", (event) => {
  console.log(event.detail);
});

  

    const el = document.getElementById("dialog-events-client");
el?.addEventListener("dialog-open-changed", (event: Event) => {
  console.log((event as CustomEvent<{ id: string; open: boolean }>).detail);
});