Nuxt preview: make the preview container layout-transparent and mount previews by element

Note: This is an issue generated issue & code. I checked and approved everything.

Problem/Motivation

The Nuxt preview provider renders every editor component into a plain block div.nuxt-preview-container. (1) That div — not the component root — becomes the flex/grid item of any surrounding layout component, so the component's own layout classes never apply and the editor rendering diverges from the published page (which has no wrapper at all); %-based components collapse to min-content inside shrink-to-fit parents. (2) js/nuxt-preview.js mounts via document.querySelector('#' + id) although it already holds the element; editors that double-buffer preview documents (e.g. Drupal Canvas' iframe swap) have the same id in two documents, and queued mounts from a swapped-out document throw Target element not found — hundreds of console errors per editor load.

Steps to reproduce

Drupal Canvas + Nuxt preview provider; a page placing components inside a flex layout. Observe collapsed components in the editor (correct on the published page) and the console error flood on editor load.

Proposed resolution

Add css/nuxt-preview.css with .nuxt-preview-container { display: contents; } to the nuxt_preview library, so the component root participates in layout exactly as on the published page (pre-mount the container only holds visually-hidden slot elements; the error message it renders is a block box of its own).
In js/nuxt-preview.js, pass the container element itself to $previewComponent() (nuxt-component-preview accepts string|Element) and skip containers whose document was swapped out (!container.isConnected).
Patch attached (applies to 3.x and 3.4.1).