Currenty for text to be styled as it is styled in articles, it has to be inside `.mw-body` (`.vector-body` for old Vector), see [skins.vector.styles/typography.less](https://phabricator.wikimedia.org/source/Vector/browse/master/resources/skins.vector.styles/typography.less;7663c6674a32d7ffac6bf3bb5c3993bb1e71c1f0$40?as=source). When content is displayed outside `.mw-body`, this happens:
| **Reference in the article body** | **Reference in the popup**
| {F49170166} | {F49170054}
([source](https://ru.wikipedia.org/wiki/%D0%A1%D0%B5%D0%B2%D0%B0%D0%BD))
As you can see, the `<blockquote>`'s style is partly from the site's Common.css, partly from Vector styles. In the popup, it loses Vector styles, which creates ugliness and inconsistency.
The problem is not in this particular `<blockquote>` element (we fixed it on-wiki by changing Common.css). The problem is the general fact that the styles are applied to a very specific element in the DOM, making it impossible to reuse them. And you can't just set `.mw-body` to an arbitrary element as you set, say, `.mw-parser-output`: `.mw-body` comes with `display: grid` and other very specialized styles.
This affects both Reference Tooltips and Reference Previews. Also this affects, I suppose, all existing popup gadgets that render anything from article content. Apart from `blockquote`, this also applies to paragraphs (!), headings, and lists.
Maybe I'm missing some obvious method to circumvent this? If no, I'm asking to provide means to style content outside of `.mw-body`, as in `.mw-body`. This might imply moving away from using `.mw-body` here.