From the backend or from the JavaScript level, messages can be sent to be displayed within the HTML element with class messages. Here you will find the approach that Loki Theme took to replace this with modern JavaScript.
The Alpine.js store LumaMessageStore extends from the LumaLocalStorage store and makes it easy to access the private data section messages. The HTML element for messages is extended with an HTML attribute data-js-component="LumaMessage" referring to the JS component LumaMessage. This JS component retrieves data from the Alpine.js store, but also from the browser cookie mage-messages.
Once the messages are retrieved, new HTML message-elements are created below the main HTML element. Each element is automatically removed again after a configured timeout.
Alpine.store('LumaMessageStore').addErrorMessage('Example error');
Alpine.store('LumaMessageStore').addWarningMessage('Example warning');
Alpine.store('LumaMessageStore').addSuccessMessage('Example success');
Alpine.store('LumaMessageStore').addNoticeMessage('Example notice');
A message can be removed by giving it a double-click. And they automatically disappear when a timeout is reached. This timeout is by default 5000 milliseconds, but this can be easily tuned with an XML layout update:
<referenceBlock name="messages">
<arguments>
<argument name="timeout" xsi:type="int">10000</argument>
</arguments>
</referenceBlock>