Another newer option for this sort of thing is Alpine.JS. The default Phoenix project setup makes it easy to install/drop this into your app.js, then Alpine is built for “sprinkling” into any templating language and adding more of a “reactive” style of programming using your existing DOM nodes.

You also have Stimulus.js, or the web platform’s Custom elements if you don’t want any framework/dependency.

Stimulus leverages data-attributes to add behavior to your document.
Custom elements let you define your own <dropdown-tag>, or extend a built-in element resulting in <div is="my-dropdown">. As you’ll see in the following examples, you do not need to use ShadowDom with all it’s issues to use custom elements.

With Stimulus your markup would look like:

<div data-controller="dropdown">
  <button data-action="click->dropdown#toggle">Click me!</button>
  <div data-target="dropdown.content" class="hidden">Dropdown Content!</div>
</div>

And your controller:

import { Application, Controller } from "stimulus";

class Dropdown extends Controller {
  static targets = ["content"]

  toggle() {
    this.contentTarget.classList.toggle("hidden");
  }
}

const app = Application.start();
app.register("dropdown", Dropdown);

With custom elements, your markup would look like this:

<x-dropdown>
  <button dropdown-trigger>Click me!</button>
  <div dropdown-content class="hidden">Dropdown content!</div>
</x-dropdown>

And the js

class XDropdown extends HTMLElement {
  connectedCallback() {
    this.trigger = this.querySelector("[dropdown-trigger]");
    this.content = this.querySelector("[dropdown-content]");

    this.trigger.addEventListener("click", this);
  }

  handleEvent(event) {
    if(event.type === "click" && event.currentTarget === this.trigger) {
      this.content.classList.toggle("hidden");
    }
  }
}

customElements.define('x-dropdown', XDropdown);

For more info in handleEvent, see this post.

Or with built-in extends:

<div is="x-dropdown">
  <!-- ... -->
</div>

class XDropdown extends HTMLDivElement {
  // ...
}

customElements.define('x-dropdown', XDropdown , { extends: 'div' });

I’m currently using both Stimulus and custom elements via WebReflection/heresy for some non trivial js parts, and I can recommend both.

Thank you for all of the great suggestions and options. I was able to get really far quickly with Alpine, especially since I come from a Vue background. I will definitely explore other options as I move forward.