Support gridstack element node reparenting without losing the stylesheets #2852
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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: hisstyle
content is rather manipulated as aCSSStyleSheet
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
yarn test
) (unfortunately the current code-base is in very bad shape).