Attach a stylesheet manually to scoped style tag removes all the scoped styling

[adityabhanu]

Current behavior:

I am using Material UI for developing a web component. I an using emotion CacheProvider to scope the styles to shadow dom.
Now when I attached an external stylesheet to emotion scoped style tag manually in the DOM itself, it removed all the scoped styling for all MUI components.

**<style data-emotion="scoped" data-s=""></style><link rel="stylesheet" **
href="https://my.website.com/Content/styles/css/my.css?v=1.0.0.0">

However, if it is attached programmatically through code, it doesn't affect the scoped styles.

link.rel = 'stylesheet';
link.href = 'https://my.newholland.com/Content/MyNewHolland/css/nh.css?v=1.0.0.0';
shadow.appendChild(link);

Also if I add the link tag to another element maybe just below it scoped styles remains intact

To reproduce:

This is a very weird issue for me. I am attaching a video for you to see how you can reproduce this issue.

emotionissue.pptx

Environment information:

"react": "^18.3.1",
"react-dom": "^18.3.1"
"@emotion/cache": "^11.13.5",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/material": "^6.1.2"