A brief discussion on the working principle of component styles in Angular

In the process of developing Angular components, we are used to writing the component styles in the corresponding css files, but we have never understood how Angular does it. Style isolation, for example, if h1 { color: red } is written in component A, this style will only take effect in component A and will not affect other components. In order to explore the principle, this article is created. The following content is based on Angular CLI version 10.1.1.

How component styles work

Explore

First create a new Angular project using Angular CLI and delete Replace all the content in app.component.html with the following content:

<h1>App Component</h1>
<button class="red-button">Button</button>

Add the following content in app.component.css:

.red-button {
  color: red;
}

Run There is the following html code:

<app-root _nghost-ydo-c11="" ng-version="10.1.1">
  <h2 _ngcontent-ydo-c11="">App component</h2>
  <button _ngcontent-ydo-c11="" class="red-button">Button</button>
</app-root>

You can see that there is a property named _nghost-ydo-c11 on the app-root element. The two elements inside app-root have an attribute named _ngcontent-ydo-c11. [Related tutorial recommendations: "angular tutorial"]

So what are these attributes used for?

For a better understanding, we first create an independent component and create a new file blue-button.component.ts with the following content:

import { Component } from '@angular/core';

@Component({
  selector: 'app-blue-button',
  template: `
    <h2>Blue button component</h2>
    <button class="blue-button">Button</button>
  `,
  styles: [`
    .blue-button {
      background: blue;
    }
  `]
})
export class BlueButtonComponent {}

Place it in ## After running in #app.component.html, you will see the following html code:

You can see

app-blue-button There is also an attribute that starts with _nghost-xxx, and another attribute that is the same as the other elements in app-root. Both elements in the component have attributes named _ngcontent-yke-c11.

Since the attribute strings generated by Angular are random each time it is run, if similar attributes appear in the subsequent code, they will correspond to this screenshot.

Summary

Through observation we can conclude:

The host element of each component will be assigned a unique Attributes, depending on the processing order of the components, in the example is
• _nghost_xxx
Each element in each component template will also be assigned an attribute unique to the component, in the example It's
• _ngcontent_xxx

So how are these attributes used for style isolation?

These properties can be combined with CSS. For example, when we look at the style of the blue button in the example, we will see this css:

.blue-button[_ngcontent-yke-c11] {
    background: blue;
}

It can be seen that Angular uses this method The

blue-button class can only be applied to elements with this attribute, without affecting elements in other components.

Now that we know Angular’s ​​behavior of style isolation, how does Angular achieve this?

When the app starts, Angular will use the styles or styleUrls component properties to see which styles are associated with which components. Angular will then apply these styles and attributes unique to the elements in the component, wrap the generated css code in a style tag and put it in the header.

The above is the principle of Angular style encapsulation.

:host, :host-context, ::ng-deep

In actual development, this mechanism sometimes does not fully match our needs. In this case, Angular introduces several special selectors.

:host

Use the :host pseudo-class selector to act on the component (host element) itself.

For example, when we want to add a border to

app-blue-button, we can add the following code to the style of this component:

:host {
  display: block;
  border: 1px solid red;
}

By viewing the runtime In the code, you can see the following code block:

  <style>
    [_nghost-yke-c11] {
      display: block;
      border: 1px solid red;
    }
  </style>

:host-context

Sometimes, based on something from the component view

External Conditionally applied styles are useful. For example, there might be a CSS class representing a theme on the

element of the document, and you should style the component based on that. You can use the

:host-context() pseudo-class selector. It is also used in a form like :host(). It looks for CSS classes in the ancestor nodes of the current component's host element, up to the document's root node. It is very useful when combined with other selectors.

In the following example, which CSS will take effect will be determined based on whether the CSS class of the ancestor element is

blue-theme or red-theme.

import { Component } from '@angular/core';

@Component({
  selector: 'app-btn-theme',
  template: `
    <button class="btn-theme">Button</button>
  `,
  styles: [`
    :host-context(.blue-theme) .btn-theme {
      background: blue;
    }
    :host-context(.red-theme) .btn-theme {
      background: red;
    }
  `]
})
export class BtnThemeComponent { }

Then where it is used:

<div class="blue-theme">
  <app-btn-theme></app-btn-theme>
</div>

The button background is blue when running.

::ng-deep

我们经常会使用一些第三方 UI 库，有时候我们想改变第三方组件的一些样式，这时候可以使用 ::ng-deep，但是要注意，Angular 已经把这个特性标记为已废弃了，可能在未来的版本就被完全移除掉。

:host ::ng-deep h2 {
  color: yellow;
}

通过查看运行时的代码：

[_nghost-yke-c12] h2 {
    color: yellow;
}

可以看到，样式会作用在 app-root 里的所有元素上，包括 app-root 中使用的其他组件里的元素。

总结

在实际开发中，灵活使用以上几种方式，基本上可以满足大部分场景。

更多编程相关知识，请访问：编程教学！！

The above is the detailed content of A brief discussion on the working principle of component styles in Angular. For more information, please follow other related articles on the PHP Chinese website!