html

런타임
html`…` : Template

마크업을 값으로 만드는 태그 템플릿입니다.

설명

태그 템플릿으로 마크업을 기술합니다. 결과는 값이라서 변수에 담고, 배열에 넣고, 함수에서 돌려줄 수 있습니다. 같은 위치의 템플릿은 구조를 재사용하고 바뀐 표현식만 갱신합니다.

표현식 위치

  • 텍스트 자리 — 문자열·숫자·템플릿·템플릿 배열
  • attr=${…} — HTML 속성(문자열로 변환)
  • .prop=${…} — DOM 프로퍼티(값 그대로)
  • ?attr=${…} — 참일 때만 존재하는 불리언 속성
  • @event=${…} — 이벤트 리스너

예제

html`
  <button ?disabled=${busy()} @click=${submit}>
    ${busy() ? '보내는 중' : '보내기'}
  </button>
`;

주의

문자열은 항상 텍스트로 삽입됩니다. 신뢰할 수 있는 HTML을 넣어야 한다면 unsafeHtml()을 명시적으로 쓰고, 사용자 입력에는 쓰지 마세요.