"I guess TemplateStyles can look beyond its scope if you specify which element to look at?"

Only for the body element, for what I know.

I wonder if the html and body tag selectors are actually parsed or just that TemplateStyles inserts the article selector between them and the rest of the selector. For example, if the body had a data attribute, I wonder if we could use the attribute selector or if that would be stripped out?

Looking into the HTML, it seems that TemplateStyles edits the CSS and automatically prepends .mw-parser-output. In the case of specifying a body element, it'll add .mw-parser-output after the body element selector.

This is what I found in the style tag created by templatestyles (I had another rule in there).

.mw-parser-output .backgroundify-image img {
    height: auto;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: -1;
}
body.theme-fandomdesktop-light .mw-parser-output .themed {
    color: green;
}
body.theme-fandomdesktop-dark .mw-parser-output .themed {
    color: blue;
}

Yes, that's how it sanitizes your code and makes sure that only stuff inside the page content editable to users can be addressed.

Using the body trick is an exception to be able address skins and themes, for how I understand it.