Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support gridstack element node reparenting without losing the stylesheets #2852

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

lmartorella
Copy link
Contributor

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
Copy link
Contributor Author

This will be superseded if #2854 is accepted instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant