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

fix(useStyleTag): allow use of existing node #2442

merged 2 commits into from Nov 17, 2022


Copy link


When using useStyleTag with an ID this PR ensures that if the target ID already exists, don't re-append the node to the document <head> causing the node to move in the DOM.

This allows an empty style node to be placed in the page template & useStyleTag will use/update that - in-place, e.g.

<style type="text/css" id="custom-id"></style>

Additional context

When style elements move in the DOM it can cause unintended side-effects in terms of CSS specificity.

What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@sibbng sibbng enabled auto-merge (squash) November 14, 2022 19:35
@@ -76,7 +76,9 @@ export function useStyleTag( = id
if ( =
Copy link

@sibbng sibbng Nov 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you fix lint errors and move the lines 75-78 inside the if (!el.isConnected)?

@sibbng sibbng disabled auto-merge November 14, 2022 20:00
fix(useStyleTag): wrap all DOM updates in condition
@sibbng sibbng enabled auto-merge (squash) November 17, 2022 12:12
@sibbng sibbng merged commit 944134c into vueuse:main Nov 17, 2022
Copy link

The unintended side-effects where actually caused by CSS inheritance (source order) not so much specificity (selector "weight").

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

Successfully merging this pull request may close these issues.

None yet

3 participants