angular style

angular에서bind로인해서맨처음dom이초기화되고그다음에component에서적용한css가먹혀서

 

가끔씩안먹히는경우가있다

 

예를들어

다음과같이작성했는데

실제로는jquery로인해서밑처럼확장이된다.

보면 _ngcontent-c1 이게그경우인데

 

이런경우에styleUrls 이나style로css를적용하고싶은겅우에는

 

참고사이트처럼/deep/ 이나 >>> 를사용하면적용이된다.

-> 라우터로이동시문제

 

------------------- 수정-------------------------------

 

쉐도우dom 스타일이라고부름

 

이름	사용법	의미
host	:host	현재컴포넌트에대한쉐도우dom 선택
host-context	:host-context	템플릿외부엘리먼트의클래스조건에따라현재컴퓨넌트의엘리먼트를선택
deep	/deep/ | ::ng-deep	자식컴포넌트에속한엘리먼트를선택

------------------2018/8/23추가 --------------

/deep/ ::ng-deep (shadow-piercing descendant combinator 피어싱 자손 결합자) 는 주요 브라우저에서 지원이 제거되며, Angular또한 지원을 중단할 계획이다.

참고:

https://angular.io/guide/component-styles

https://stackoverflow.com/questions/37689673/angular2-styling-issues-caused-by-dom-attributes-ngcontent-vs-nghost?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa