CODEWITHSUNDEEP
csscss-selectors
MkMan
MkMan

Reputation: 2191

Why does loading an extrnal JS file break the page's styling?

I have a situation where an external js file is loaded on the page depending on a query parameter. The file contains UI components and their styles. When the file loads, it breaks the page's styling.

What I am struggling to understand is why the page elements have the same css classes but appear different.

Without the JS file

enter image description here

With the JS file

enter image description here

Thanks

Upvotes: 0

Views: 113

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

You're loading a new JavaScript file that has <style> tags embedded within it. These are denoted by the inline styles you seen in your images.

Because the styles that are already on the page are at an inline level as well, they tie with the new styles in terms of specificity. As such, rules that are applied last (by the conditionally added JavaScript file) override those that are applied first (in the base document). This can be seen by the strikethroughs in your image. Those rules are getting loaded, but are being overridden.

Upvotes: 1

Related Questions