Full page editing with a lazily mounted editable

A DecoupledEditor created from initial data alone, with no source element to attach to, is a detached editor: it creates its editable but leaves placing it in the DOM to the integration. So between Create editor and Mount editable the data is loaded while the editable is detached. The tree the <style> elements from the data's <head> belong to is unknown then – it may still turn out to be document.head, a shadow root, or nothing at all – so nothing may be rendered until the editable is connected.

The mount target is chosen at mount time, so the same editor instance can end up in the light DOM or in a shadow root. The data variants set different declarations for h2 and p, so styles left over from a previously loaded document show up in the content, which is what to watch – the report only counts them and says where they are.

What to check:

• Right after Create editor the report counts zero styles in document.head. The data is loaded – the editable simply is not anywhere yet.
• Mount editable into the light DOM puts two styles in document.head and the content picks up the variant colors.
• Mounting into either shadow root puts them in that root instead, with nothing stranded in document.head, and the content inside the shadow root is styled.
• Switching the data variant before mounting and then mounting renders the styles of the variant loaded last only – no leftovers from the initial data.
• Switching it after mounting keeps the count at two – it must not grow – and the content picks up the new colors, with none of the previous variant's declarations still applying.
• Loading the variant with no head styles drops the count to zero.
• Destroy editor drops the count to zero as well, wherever the styles were. The toolbar and the editable are taken out of the page by this test, not by the editor – a detached editor leaves that to whoever mounted them.
• With Render styles from <head> off, no styles are rendered at any point, before or after mounting.
• Leaving source editing mode re-sets the data, so it goes through the same path as the Load data button.
• The <script> in the data is preserved in the output but never runs: no alert.

The styles are rendered once the editable is connected, which the browser reports asynchronously, so the report is taken a moment after each action. Refresh report takes another look.