Support gridstack element node reparenting without losing the stylesheets

[lmartorella]

Description

The current implementation of gridstack styling is based on a <style> node appended in the parent div. However this element doesn't contain any CSS text content: his style content is rather manipulated as a CSSStyleSheet object.

This works fine unless the parent div is detached from the document, and then reattached. This operation can be common if gridstack containers are hosted in some type of high-level container (like tabs) that supports reorder.

It seems that the issue is somewhat related to the fact the CSSStyleSheet instance depends on the parent DOM context. So, when detached, the style content is reset.

Using CSS as text rather than opaque style object fixes the issue.

Probably the best approach to leverage CSSStyleSheet objects is to switch to HTML Custom Elements and Shadow DOM.

Checklist

• Created tests which fail without the change
• All tests passing (yarn test) (unfortunately the current code-base is in very bad shape).
• Extended the README / documentation, if necessary

[lmartorella]

This will be superseded if #2854 is accepted instead.

[adumesny]

thanks for this fix, I should have grabbed this a while back since it doesn't fundamentally change things. I will have to review the other replacement