How I Pass Parameters from CSS to JS

How I Pass Parameters from CSS to JS 1. Background: Why Pass Parameters Through CSS? CSS has many uses for media queries, such as detecting device size, whether mouse interactions are supported, whether the system is in dark mode, whether power-saving mode is enabled, and so on....

Code: Dispatching a CustomEvent

const event = new CustomEvent('show', {
  detail: { message: payload, sentAt: new Date().toLocaleTimeString() }
});

window.dispatchEvent(event);
Result
Waiting for an event...

Code: Listening for the Event Payload

window.addEventListener('show', (event) => {
  render(event.detail.message, event.detail.sentAt);
});
Event log
No events yet.