사용 : 호스트 선택기 대 컨테이너 div

Question

내가 보는 방식대로 구성 요소의 스타일을 지정하기위한 컨테이너 인 <div>을 대체 할 수 있습니다. 예 :

사용하여 컨테이너

@Component({ 
    template: ` 
     <div class="container"> 
      <h1>Some Title</h1> 
      <p>Some Content</h1> 
     </div> 
    `, 
    styles: [` 
     .container { 
      border: 1px solid black; 
      display: flex; 
     } 
    `], 
}) 

만약 내가 제대로 이해하고 :host

@Component({ 
    template: ` 
     <h1>Some Title</h1> 
     <p>Some Content</h1> 
    `, 
    styles: [` 
     :host { 
      border: 1px solid black; 
      display: flex; 
     } 
    `], 
}) 

사용하여,이 두 사람은 동일한 문제를 해결한다. 거의 모든 단일 구성 요소에서 걱정할 요소와 클래스를 적게하는 것이 좋습니다.

질문 : :host은 무엇을위한 것입니까? 그렇지 않다면, 그것의 요점은 무엇이며, 어디에서나 컨테이너를 추가하는 것 외에도 구성 요소에 스타일을 부여하는 모범 사례는 무엇입니까?

Answer 1

같은 문제가 해결되지 않습니다. :host은 호스트의 스타일을 지정하기위한 것이며, .container은 구성 요소 내에 container 클래스가있는 div의 스타일을 지정하기위한 것입니다.

.container div는 호스트 요소의 스타일을 지정할 수있는 반면 캡슐화로 인해 구성 요소 외부에서 스타일을 지정할 수 없습니다.

display 속성의 초기 값은 inline이므로 기본적으로 구성 요소는 inline 요소로 표시됩니다. 어쩌면 당신은 그것을 원하지 않을 수 있습니다. 특히 허용되지 않는 경우에도 반 직관적 인 것처럼 보일 수있는 if you have a block element inside of it이 있습니다.

Answer 2

:host은 현재 구성 요소 (예 : <app-header> 요소)에 대한 래퍼 요소의 스타일을 지정하고 있습니다. 알다시피, 이와 같은 스타일 요소는 짧고 편안한 방법입니다.

Answer 3

나는 또한 현재의 대답에 다음과 같은 관측을 추가합니다 :

클래스 .container

• 당신은 클래스 당신은 항상 당신이 원하는 경우에 동기화를 유지하는 것보다 .container를 사용하는 경우 구성 요소의 이름을 바꿉니다. 대규모 응용 프로그램에서는 개발 초기 단계에서 자주 발생하는 경향이 있습니다.
• 또한 좋은 CSS 위생 습관이없는 경우 특히 이름 충돌이 발생할 수 있습니다.
• 요소 클래스 속성을 덮어 쓰면 런타임에 실수로 삭제 될 수 있습니다. element.classList.add(); .remove()

사용하여 호스트

• 여분 당신에게 많은 타이핑의 필요성을 (때로는 구성 요소 이름이 길어질 수 있습니다)
• 그것은 당신이 요소에 추가 어떤 클래스에 상관없이이 없다 . 나는 또한 .container 클래스보다 우선해야한다고 생각한다.
• (각도 만 해당) 각도는 동일한 동작을 에뮬레이트하지만 구성 요소 캡슐화를 비활성화하면 :host 선택자가 쓸모 없게되어 .container 클래스를 사용할 수 있습니다.