Ionic의 Code Dreation에 신경을 많이 썼기 때문에 stencil의 Host 요소의 역할을 총괄했습니다.

Ionic의 코드(Stncil)를 읽은 후 JSX가 렌더에 걸리는 요소는 반드시 Host 요소로 요약된다.예를 들어, IonItem의 경우 는 다음과 같습니다.
https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/item/item.tsx#L277-L317
그래서 필수Host는 웹 컴퍼니host를 나타내는 필수 요소라고 생각하지만 그렇지 않기 때문에 역할을 총괄하고 싶습니다.

Host의 역할

host 문서에서 요소가 어떻게 작동하는지 읽을 수 있습니다.
https://stenciljs.com/docs/host-element Host는 Virtual API이며 DOM으로 표시되지 않습니다.렌더링할 때 처리하거나 내부 API의 시작점을 설정할 수 있습니다.

웹 Components 호스트 작업

예를 들어, 다음 웹 Components가 정의되어 있습니다.이곳의 정의명은 todo-list이다.

@Prop() open = false;
...
<Host
  aria-hidden={this.open ? 'false' : 'true'}
  class={{
  'todo-list': true,
  'is-open': this.open
  }}
/>

이 웹 Components를 사용할 때 open 속성이 있기 때문에 <todo-list open="true">처럼 사용할 수 있다.그러나 open 속성에서 Host 자체area-hidden와class는 변화가 발생하기 때문에 실제 상황은 다음과 같다.

<todo-list open="true">
↓
<todo-list class="todo-list is-open" aria-hidden="false"></todo-list>

<todo-list open="false">
↓
<todo-list class="todo-list" aria-hidden="true"></todo-list>

는 웹 Components 자체의 표현을 바꾸는 데 매우 유용하다.

최상위 DOM으로

웹 Components는 Components이기 때문에 여러 개의 최고급 DOM이 있을 수 없습니다.다음과 같은 일을 할 수 없다는 것이다.

return (
  <h1>Title</h1>
  <p>Message</p>
);

여기에 필요하지 않은 div 등을 사용하여 깊이 있게 끼워 넣을 필요가 없다.호스트 쓰세요.

return (
  <Host>
    <h1>Title</h1>
    <p>Message</p>
  </Host>
);

Component 내 API로 사용

Host를 사용하면 웹 컴포니츠를 1위@Element()로 장식물을 사용할 수 있다.

import { Element } from '@stencil/core';

...
export class TodoList {

  @Element() el: HTMLElement;

  getListHeight(): number {
    return this.el.getBoundingClientRect().height;
  }
}

아니요, 사용하지 않아도Host사용할 수 있다면@Element()가능하지만상태업데이트prop가동적으로 이루어지지 않아API로불안정하므로Host사용하세요.

Shadow DOM 선택기로 사용

다음과 같은 조형을 채택했다고 가정하자.

my-element {
  color: black;
}
my-element div {
  background: blue;
}

섀도우 DOM을 활성화하면 선택기의 시작점이 변경되므로 요소 자체에서 스타일을 지정할 때 사용해야 합니다Host.Host를 사용할 때 Shadow DOM을 유효하게 설정하면 다음과 같이 다시 쓸 수 있습니다.

:host {
  color: black;
}
div {
  background: blue;
}

Host를 사용하지 않으면 요소 자체를 조형할 수 없다.

총결산

div라면 Host의 위력은 분별하기 어렵지만 Host가 없으면 기존 HTML Element을 실현할 수 없기 때문에 먼저 설치Host를 권장합니다.
그럼 안녕히 계세요.