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.

Sign up for GitHub

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

Jump to bottom

don't recreate <style> tags if we're able to dedupe #45

Closed
danielroe opened this issue Dec 10, 2021 · 7 comments
Closed

don't recreate <style> tags if we're able to dedupe #45

danielroe opened this issue Dec 10, 2021 · 7 comments
Labels
released

Comments

@danielroe
Copy link
Contributor

Perhaps use id?

context: #44 and nuxt/nuxt#12980
@egoist egoist closed this as completed in 5ef9b62 Dec 10, 2021
@github-actions
Copy link
Contributor

🎉 This issue has been resolved in version 0.7.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nndnha
Copy link

nndnha commented Dec 11, 2021

@egoist I think the problem still exists in case of updating existing attributes.

head/src/index.ts

Line 137 in 5ef9b62

el.removeAttribute(key)
When do updating element attributes this line will firstly remove them all, so if the removed attribute is class then we will have a flickering screen as the below example.

<style>
  body.dark {
    background-color: black;
  }
</style>
<body class="dark" data-head-attrs="class">
  ...
</body>

@egoist
Copy link
Collaborator

egoist commented Dec 11, 2021

@nndnha try https://github.com/vueuse/head/releases/tag/v0.7.4 btw nice avatar

@nndnha
Copy link

nndnha commented Dec 11, 2021

@egoist Thanks for your quick fix. It was not easy to describe this problem so here is the real code that I will use it to try to verify the bug. In this demo I will use MutationObserver to observe the changes of the body class attribute and show it to the screen.

https://stackblitz.com/edit/vue-qwpubu?file=public%2Findex.html

The problem comes when we call useHead multi times in App.vue component.

@nndnha
Copy link

nndnha commented Dec 12, 2021 •
edited
Loading

@egoist Here is the better version https://codesandbox.io/s/dank-voice-eu4hx?file=/app.vue

You need to refresh the page to see the result.

html

We can see that the browser will always received this content by Nuxt's server side rendering process

<html class="dark" data-head-attrs="class">...

And it will make the whole page dark, after hydration client will firstly remove html class attribute and then add it again later. This action will make the screen flickering by toggled dark/light background color.

@nndnha
Copy link

nndnha commented Dec 15, 2021

@egoist Can you please confirm the bug?

@nndnha nndnha mentioned this issue Dec 16, 2021
Closed
3 tasks
@KaelWD
Copy link

KaelWD commented Dec 17, 2021

This is still extremely broken.

This line removes all link tags that aren't controlled by vueuse/head:

head/src/index.ts

Line 208 in 392e8c8

oldElements.forEach((t) => t.parentNode?.removeChild(t))

If I remove that then this section does the same thing when run by vite-ssg because querySelector('link[key="null"]') just returns the first <link> due to a jsdom bug:

head/src/index.ts

Lines 213 to 218 in 392e8c8

const uncontrolled = head.querySelector(
`${t.tagName.toLowerCase()}[${key.name}="${key.value}"]`,
)
if (uncontrolled) {
uncontrolled.parentNode?.removeChild(uncontrolled)
}

@tylerforesthauser tylerforesthauser mentioned this issue Apr 13, 2022
Open
@danielroe danielroe mentioned this issue Feb 9, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@egoist @nndnha @KaelWD @danielroe