Why is Angular2 adding random generated attributes to html elements after render

Question

I am having hard time understanding why is Angular2 adding these weird attributes to HTML elements after app is loaded (ex. on provided screenshot"_ngcontent-cxi-6"). I provided screenshot from DevTools with example.

Screenshot from DevTools.

That attribute always has fixed prefix "_ngcontent-". The rest is generated randomly but is consistent on every HTML element.

The problem comes when i want to insert HTML that i generate in Component or retrieve from Server with directive [innerHtml]. In that case elements in inserted HTML code do not get Angular's attribute:

 <span [innerHtml]="'<span>some text </span>'"></span>

Result of [innerHtml] binding is on picture below:

enter image description here

CSS styling problem

When i want to style these printed elements, with injected css file, nothing happens. CSS file is inserted with "styleUrls" property of @Component:

@Component({
    templateUrl: 'someHtmlTemplate.html',
    styleUrls: ['someCSSfile.css'],
})

Style that gets injected into HTML is formatted into this:

span[_ngcontent-cxi-6] {
   background: pink;
   font-size: 20px; 
}

In this case CSS is looking for span with attribute [_ngcontent-cxi-6], thus making it unable to style it.

Possible solution This CSS code solves things

:host >>> h3 { color: red; }

is compiled after injection into HTML:

[_nghost-krr-4] > > > span {
   background: pink;
   font-size: 20px;
}

But it is a crazy workaround solution for something so simple.

Thierry Templier · Accepted Answer · 2016-08-11 14:44:10Z

1

In fact, it depends on the encapsulation mode you use on your component for shadow DOM. By default, it's the emulated mode so Angular2 adds things on elements for this.

ViewEncapsulation.None - No Shadow DOM at all. Therefore, also no style encapsulation.
ViewEncapsulation.Emulated - No Shadow DOM but style encapsulation emulation.
ViewEncapsulation.Native - Native Shadow DOM.

answered Aug 11, 2016 at 14:44

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is Angular2 adding random generated attributes to html elements after render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related