From MDN webdocs

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

While from Shopify Docs

All of the checkout steps are hosted at a single URL path, where the content is loaded dynamically depending on the current step.

Shopify is most probably loading some stuff on their end on DOMContentLoaded and fires page:load event when everything is ready and you can make your DOM customizations. Moreover, DOMContentLoaded will only be fired once for whole checkout, but page:load would be fired once for each Checkout step.

Same thing has been described in the docs for page:load.

The page:load event is triggered when the content of each step is loaded. This is the default event that you should use when adding content into the page on load.