각도로 CSS 캡슐화

Question

저는 최근 Angular 구성 요소로 CSS와 DOM 캡슐화를 탐구했습니다.

ng-cli를 사용하여 빠른 프로젝트를 스캐 폴딩하고 구성 요소를로드했습니다. 구성 요소 선택기가 'app-component'라고 가정 해 보겠습니다. 이것은이 구성 요소와 관련된 모든 dom과 css를 자체 내에 캡슐화합니다. 지금까지 좋은 모든 것. 나는 내 이전 측정 값에서 무엇을 배웠는가

는 구성 요소가 index.html 파일의 I에서,

이제 (이 웹 구성 요소에 대한보다 구체적인이다) 외부 CSS가에 피도 내부 CSS 밖으로 피를 허용하지 둘 것입니다 bootstrap css 파일을 포함 시켰습니다. bootstrap CSS의 스타일이 구성 요소에 유출되었는지 아닌지를 확인하고 놀라게했습니다. 내 구성 요소 내에서 부트 스트랩 CSS를 제공하는 모든 클래스를 사용할 수 있습니다.

왜 이런 일이 발생합니까? 본질적으로 외부 CSS가 구성 요소에 유출됩니다. 뷰 캡슐화 개념을 각도로 이해하지만 이는 적합하지 않습니다.

조금 순진하게 들리지만 여기에 요점을 놓칠 수도 있습니다!

편집 기본적으로 나는이 말하는거다 :

는

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

이 말한다 :

범위 지정된 CSS : 그림자 DOM 내에 정의 된 CSS가 여기에 속합니다. 스타일 규칙이 누설되지 않고 페이지 스타일이 블리드되지 않습니다.