FrontEnd/Angular

angular style

철철22 2018. 6. 18. 14:14
반응형

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

 

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

 

예를들어

다음과같이작성했는데


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




보면 _ngcontent-c1 이게경우인데

 

이런경우에styleUrls 이나stylecss적용하고싶은겅우에는

 

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

-> 라우터로이동시문제

 




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


 

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

 

이름

사용법

의미

host

:host

현재컴포넌트에대한쉐도우dom 선택

host-context

:host-context

템플릿외부엘리먼트의클래스조건에따라현재컴퓨넌트의엘리먼트를선택

deep

/deep/ | ::ng-deep

자식컴포넌트에속한엘리먼트를선택




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


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





반응형