You can open and close <wa-dialog> from anywhere on the page without writing JavaScript. (The same concept works for <wa-drawer>)

A screenshot of 10 lines of HTML code on the Atom One theme in dark scheme. wa-button data-dialog="open checkout"> Checkout /wa-button> wa-dialog id="checkout" label="Checkout"> … wa-button slot="footer" data-dialog="close"> Done /wa-button> /wa-dialog>