Where the devil did you get the idea that the DOM is cacheable. Well, it kind-of is, but only on pages that don't change their content.

If it's re-used across different pages, it's not cached when the sub-page is loaded. This is why things like SVG site logos or menu icons in the markup is dumbass garbage.

If the user hits F5 forcing a reload, anything in the markup is not cached. (that's F5, not CTRL-F5)

Anything in the markup is not pre-cached for other pages, when the content of the page changes forcing a cache invalidation, and dozens of other issues. That's why crapping style into the markup is as mentally enfeebled as putitng SVG or base64 encoded images there. JUST like static scripttardery having no business in the markup either.

Your conclusion/summary is correct, but how you got there is a bit of a wonk.