Angular innerHTML style 반영되지 않는 문제

최근에 angular를 한참 공부하며 유지보수 중인데,, css 클래스가 innerHTML에 먹지 않아 한참 헤맸는데 회사 선임님이 지혜를 빌려주어 이해할 수 있었습니다. 해당 내용에 대해 정리해 보겠습니다.

##### app.component.html 코드 #####
<! — #1 템플릿에서 class로 css를 지정한다. -->
<div>
   <span class=”textBlue_BackYellow”> Hello Template </span>
</div>
<! — #2 컴포넌트 클래스에서 innerHTML을 통해 접근, htmlCode에서 class로 css지정 -->
<div [innerHTML]=”htmlCode”>
</div>
##### app.component.ts 컴포넌트 클래스 #####
export class AppComponent {
   htmlCode: string = "<span class='textBlue_BackYellow'> Hello   innerHTML </span>"
}
##### app.component.css ####
.textBlue_BackYellow {
   color: blue;
   background-color: yellow;
}

위 코드 중 innerHTML을 사용한 곳을 보면 프로퍼티 바인딩을 통해 innerHTML 프로퍼티에 컴포넌트 클래스의 htmlCode 변수를 바인딩하고 있는걸 알 수 있습니다. htmlCode는 중간에서 볼 수 있듯이 <span> 태그에 class를 통해 css를 지정하고 있습니다. 이 결과는 아래와 같았습니다.

제 경우 왜 innerHTML 프로퍼티에 class로 css를 지정하는데 먹히지 않는거냐며 한참을 헤맸습니다.

아시다시피, 앵귤러에서 encapsulation 을 따로 설정하지 않는다면 기본적으로 css는 컴포넌트에만 반영되도록 되어있습니다. 위 결과를 크롬 개발자 도구에서 확인해 보겠습니다.

위에 보시는 화면은 Hello Template 이 적혀진 내부 HTML 코드를 보여줍니다. Angular 에서 css 캡슐화를 위해 _ngcontent-c0 과 같이 임의의 식별 값을 붙여 css가 템플릿 내에서만 반영되도록 합니다. 다른 컴포넌트의 경우 _ngcontent-c1 등과 같은 식별 값이 붙게 되겠죠. 화면의 아래의 textBlue_BackYellow 라는 css역시 식별값을 통해 접근하는 것을 확인할 수 있습니다.

이제 Hello innerHTML 이 적혀진 화면을 크롬 개발자 도구에서 동일하게 보겠습니다.

먼저 화면의 아래를 보시면 지정 된 스타일이 없는 것을 알 수 있습니다. 이유는 innerHTML을 통해 HTML 태그와 css를 넣을 경우 angular가 캡슐화를 위해 생성한 식별값이 적용되지 않기 때문입니다.

화면에 나와있는 span 태그를 비교해보면 템플릿에서 사용한 span 태그는 _ngcontent-c0 정보를 가지지만, innerHTML로 바인딩한 결과는 식별 값을 나타내고 있지 않습니다.

더 좋은 방법이 있을지 모르지만 전 빠르게 일을 하기 위해 angular 전역적으로 사용되는 style.css 에 필요한 class를 추가하여 해결했습니다. 도움이 될까봐 정리해 둡니다.