But I also like the decrapulator idea.

In certain environments, it quickly becomes hard to follow these rules, especially when SEO and "best practises" don't really matter.

For example, you might want to avoid reaching into a React/Vue/whatever component's root element via CSS to style it, and instead prefer to add a wrapping HTML element.

From the markup consumer's perspective, this is terrible (div soup).

But as long as it does not make a difference to the user experience, this difference can be irrelevant for some types of web apps (especially b2b software, anything that is not a public site).

And from the developer's perspective, the component preserves better isolation and changes are more predictable. Still I get the ick when looking at the unneccessarily deep DOM tree and totally understand objecting to that.

I try to pick the middle and apply things like flex (child) properties, margin, max-width etc to root elements of components, but nothing else. Basically all properties that only relate to the surroundings.

This principle also makes sense to me when architecting regular CSS for public websites, e.g. when following approaches similar to BEM etc.