[Anglar] encaptsulation이 뭐예요?

Anglar 구성 요소로 지정할 수 있는 encaptsulation을 조사했습니다.

@Component({
  selector: 'test',
  template: `
    <div class="test">Test!</div>
  `,
  styles: [`
    :host {
      .test {
			  color: red;
			}
    }
  `],
	// これ
  encapsulation: ViewEncapsulation.Emulated
})
class TestComponent {
}

encapsulation은 구성 요소와 연결된 템플릿과 CSS의 숨겨진 설정을 진행합니다ViewEncapsulationenum으로 대체로 다음과 같은 차이가 있다.
구성원
설명
Emulated
묵인하다.Anglar는 Shadow DOM을 시뮬레이션하고 템플릿과 CSS를 숨깁니다.
Native
Deprecated가 됩니다.ShadowDom 대신 추천
None
템플릿 및 CSS는 숨겨지지 않습니다.쓴 것은 전 세계적인 풍격에 첨가될 것이다.
ShadowDom
섀도우 DOM을 사용하여 템플릿 및 CSS 숨기기
Native 외에도 다양한 요소를 자세히 살펴보았습니다.
StackBlitz에 코드를 놓습니다.
https://angular-ivy-mt4a7t.stackblitz.io

ViewEncapsulation.Emulated

묵인하다.섀도우 DOM 작업을 시뮬레이션하여 구성 요소 내에서 템플릿과 CSS를 숨깁니다.
시위 행진: https://angular-ivy-mt4a7t.stackblitz.io/emulated

간이 .test[_ngcontent-lyr-c47] 부분인가요?EmultatedTest1 Component 산하 요소_ngcontent-lyr-c47의 속성은 자동으로 추가되기 때문에 CSS의 응용을 구성 요소에 한정할 수 있습니다.자세한 내용은 다음과 같습니다. https://angular.jp/guide/component-styles#생성된 css 검사
(기본적인 행동을 배우는 것은 이렇게 이루어진다.)

ViewEncapsulation.None

"템플릿 및 CSS를 숨기지 않음"을 드릴다운하는 경우, 예를 들어 페이지에 구성 요소를 배치하면 해당 페이지의 모든 구성 요소에 스타일이 적용됩니다.
시위 행진: https://angular-ivy-mt4a7t.stackblitz.io/none
NoneTest1 Component ViewEnceptsulation에서None을 지정했기 때문에 non-test1입니다.component.css를 통해 지정된.test급 CSS(배경색은 빨간색)도 NoneComponent와 NoneTest2 Component에 적용됩니다.
크롬 DevTools를 살펴보면 Emulted와 달리 CSS 지정은 단순.test에 불과하기 때문에 이런 행동으로 이해할 수 있다.

ViewEncapsulation.논이 사용한 장소는 아직 기억나지 않지만, 사용하려면 의도하지 않은 스타일이 적용되지 않도록 주의해야 한다.

ViewEncapsulation.ShadowDom

CSS의 숨김에서는 Emulted와 같은 Anglar의 구조가 아니라 브라우저의 로컬 Shadow DOM을 사용합니다.
Shadow Dom에 관해서는 깊이 파헤치는 것을 멈추겠지만, 나는 실제로 행동해 보고 싶다.
시위 행진: https://angular-ivy-mt4a7t.stackblitz.io/shadow-dom

지정ViewEncapsulation.ShadowDom된 섀도우 DomaTest1 Component에 추가ShadowRoot됐다.

참고 자료

Anglar 일본어 문서 - 구성 요소 스타일