웹 컴포넌트

{{{#!wiki style="margin:-10px"	<tablebordercolor=#808080><tablebgcolor=#808080>	월드 와이드 웹 관련 문서	}}}
{{{#!wiki style="word-break: keep-all; margin: 0 -10px -5px;" {{{#!folding [ 펼치기 · 접기 ] {{{#!wiki style="letter-spacing: -1px; margin:-6px -1px -11px; word-break: keep-all"	<colbgcolor=#808080><colcolor=#fff> HTTP	버전(HTTP/1.1 · HTTP/2 · HTTP/3) · HTTPS · 응답 코드 · 헤더 · HSTS
표현 레이어	HTML · URL(쿼리 문자열) · wai-aria
클라이언트	HTTP 클라이언트 · 웹 브라우저(브라우저 전쟁 · 브라우저 엔진 · WebDriver · 브라우저 개발자 도구)
표준화	웹 표준 · W3C · WHATWG
기술	웹소켓 · WebGL · 웹 컴포넌트 · 프로그레시브 웹 앱 · WebAssembly · CORS · WebRTC
기타	오픈 그래프 프로토콜 · MDN

}}}}}}}}} ||

1. 개요2. 구성 요소3. 사용 예시

1. 개요

Web Component

https://developer.mozilla.org/ko/docs/Web/API/Web_components

웹 플랫폼에서 재사용 가능한 사용자 정의 UI 컴포넌트를 만들기 위한 표준 기술이다.

shadow-DOM 단위로 캡슐화된 컴포넌트를 정의하고 사용할 수 있으며, 웹 표준이기 때문에 다양한 프레임워크와 무관하게 브라우저 수준에서 직접 지원된다.

2. 구성 요소

Custom Elements: HTMLElement을 상속받아 새로운 태그를 정의한다.
Shadow DOM: 컴포넌트 내부에 독립된 DOM 트리를 구성하여 외부 스타일이나 스크립트의 영향을 받지 않는다.
HTML Templates: <template> 태그를 통해 초기 콘텐츠 구조를 정의하고 JavaScript로 클론하여 삽입해서 쓴다.

3. 사용 예시

#!syntax html
<!-- HTML: 사용자 정의 태그 사용 -->
<my-greeting name="Alice"></my-greeting>

<!-- JavaScript: 컴포넌트 정의 -->
<script>
  class MyGreeting extends HTMLElement {
    connectedCallback() {
      const name = this.getAttribute('name') || 'World';
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `<p>Hello, ${name}!</p>`;
    }
  }
  customElements.define('my-greeting', MyGreeting);
</script>

웹 컴포넌트

1. 개요

2. 구성 요소

3. 사용 예시

분류