HTML5에서 소개된 웹 컴포넌트는 여러 개의 HTML 요소와 스타일을 포함하는 재사용 가능한 구성 요소를 정의할 수 있게 해줍니다. 웹 컴포넌트는 기존 HTML, CSS 및 JavaScript를 사용하여 만들어진 강력한 독립형 기능 모듈로, 다양한 속성을 통해 동적으로 제어할 수 있습니다.

웹 컴포넌트 속성

웹 컴포넌트의 주요 속성에는 아래와 같은 것들이 있습니다.

1. id 속성

   id 속성은 웹 컴포넌트의 고유한 식별자를 지정합니다. 이 식별자는 웹 페이지 내에서 해당 컴포넌트를 참조할 때 사용됩니다.

   <my-component id="unique-id"></my-component>
   

2. data-* 속성

   data-* 속성은 사용자 정의 데이터 속성을 지정할 때 사용됩니다. 이 속성은 JavaScript를 통해 동적으로 데이터를 세팅하고 읽어올 수 있습니다.

   <my-component data-name="John" data-age="30"></my-component>
   

3. attribute 속성

   일반 HTML 요소와 마찬가지로, 웹 컴포넌트에도 기본적인 속성을 지정할 수 있습니다. 예를 들어 class, style 등이 있습니다.

   <my-component class="custom-class" style="color: red;"></my-component>
   

4. 이벤트 속성

   웹 컴포넌트는 이벤트 속성을 사용하여 특정 동작에 대한 이벤트를 처리할 수 있습니다.

   <my-component onclick="handleClick()"></my-component>
   

참고 자료

• MDN Web Components