CODEWITHSUNDEEP
jqueryhtmltypescriptangularhead
AlvYuste
AlvYuste

Reputation: 945

Angular 2 always places <style> tags at root <head>

Unless the component has encapsulation: ViewEncapsulation.Native all the <style> tags in the template are placed inside the <head> section of the main DOM. Is there any trick to crack this?

My use case is:

  1. I load an external HTML template dynamically and embed it, creating a component.
  2. I don't want the styles linked or embedded to affect the rest of the app.
  3. I cannot use Native encapsulation, I have to keep the main DOM. That's because I use some jQuery libraries that manipulates the DOM, and they don't work as expected with Shadow DOM. This jQuery libraries work from directives loaded in this custom component.
  4. I tried to replace <link href="url"> with <style>@import "url"</style>, but their are always moved to the root <head> and affect to the whole app.

Any idea? If there is no way to solve this, I should have try to fix point 3.

Thanks!

Upvotes: 1

Views: 820

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657741

The styles are rewritten so that the selectors contain the unique _ngcontent-xxx attributes that are added to each element and to only match these elements.

There is nothing you can do about styles being added to <head>.

If these styles affect other elements it might be a bug or you might use it in a way that emulation doesn't cover.

Upvotes: 1

Related Questions