Repository: next.js
Issue: router.push removes injected styles from web-components when called
Labels: bug,Navigation

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.15.0
      npm: 8.19.4
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.8
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.3.1-canary.8", newest: "13.3.1-canary.9".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link)

### Link to the code that reproduces this issue

https://github.com/pedroresende/css-removal-bug

### To Reproduce

Steps:

1. Install a next.js project, without the experimental support for app (using pages)
2. install the package `@pedroresende/css-error`
3. Open `pages/index.tsx` and add the following

```tsx
import Head from "next/head"
import { MyComponent } from "@pedroresende/css-error"
import { useState, useEffect } from "react"
import { useRouter } from "next/router"

export default function Home() {
  const router = useRouter()
  const [hasLoaded, setLoaded] = useState(false)
  useEffect(() => {
    if (!hasLoaded && typeof window !== undefined) {
      setLoaded(true)
    }
  }, [hasLoaded])
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {hasLoaded && <MyComponent first="Your" last="Name" />}
        <button onClick={() => router.push("/another")}>Next Page</button>
      </main>
    </>
  )
}

4. Create a new file `pages/another.tsx` with the following inside

```tsx
import Head from "next/head"
import { MyComponent } from "@pedroresende/css-error"
import { useState, useEffect } from "react"
import { useRouter } from "next/router"

export default function Another() {
  const router = useRouter()
  const [hasLoaded, setLoaded] = useState(false)
  useEffect(() => {
    if (!hasLoaded && typeof window !== undefined) {
      setLoaded(true)
    }
  }, [hasLoaded])
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {hasLoaded && <MyComponent first="Your" last="Name" />}
        <button onClick={() => router.push("/")}>Back</button>
      </main>
    </>
  )
}
```

5. Run npm run dev
6. Click on the Next page, you'll notice the css will disappear from the header

It can be tested on the following url https://css-removal-bug.pages.dev

### Describe the Bug

When the router.push("/another") is call the injected style, but the web-component, will be removed

# Index

![Screenshot 2023-04-17 at 15 04 51](https://user-images.githubusercontent.com/951377/232508222-ec3ed739-6795-4f21-9ce3-719ea1253a9b.png)

# Another

![Screenshot 2023-04-17 at 15 05 01](https://user-images.githubusercontent.com/951377/232508293-4efbb792-14ce-46f6-b8bf-0663f99950d5.png)

However, if I refresh the page, the css is loaded

### Expected Behavior

I'd expect the injected style to remain present

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_