웹 컴포넌트(Web Component) API - 슬롯(Slot)

Web Component

웹 컴포넌트는 코드들을 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다.

슬롯(Slot)

웹 컴포넌트의 여러 기술들 중 HTML 템플릿에는 ‘template’과 ‘slot’ 엘리먼트가 있다.

이들은 렌더링된 페이지에 나타나지 않는 마크업 템플릿을 작성할 수 있게 해주며, 커스텀 엘리먼트의 구조를 기반으로 여러번 재사용 할 수 있다.

 

HTML ‘slot’ 요소는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 placeholder이다.

 

[예제]

<template id="my-component">
	<slot name="header"></slot>
	<slot name="footer"></slot>
</template>

ㄴ 템플릿 작성

<my-component>
	<h1 slot="header">이것은 외부에서 넘어온 헤더입니다.</h1>
  <footer slot="footer">이것은 외부에서 넘어온 푸터입니다.</footer>
</my-component>

ㄴ slot의 name 속성을 활용해 해당 위치에 외부 콘텐츠를 넘길 수 있다.

 

자바스크립트 없이 HTML만으로 작성한 코드

 

랜더링 된 화면 모습

 

template는 브라우저가 태그의 내용은 인식하지만 화면에 랜더링 하지 않는다.