A while back, Jake Archibald tweeted:
Don't render buttons on the server that require JS to work.
At work, we use Stimulus. Stimulus has a pretty appealing philosophy:
Stimulus is designed to enhance static or server-rendered HTML—the “HTML you already have”
My hunch was that I should use the
connect() lifecycle method to render a
button into the component (and introduce any other script-dependent markup adjustments) at the earliest opportunity. I wasn’t sure whether creating new DOM elements at this point and fitting them with Stimulus-related attributes such as
target would make them available via the standard Stimulus APIs like server-rendered elements but was keen to try. I started by checking if anyone was doing anything similar and found a thread where Stimulus contributor Javan suggested that DIY target creation is fine.
I then gave that a try and it worked! Check out my pen Stimulus with true progressive enhancement. It’s a pretty trivial example for now, but proves the concept.