Web components

• Web components
• https://developer.mozilla.org/ko/docs/Web/API/Web_components
• 간단 요약: 재사용 가능한 콤포넌트를 만들어서 사용할 수 있다.
  특정 태그를 내가 원하는 형태로 재정의해서 사용할 수 있다.
  
• <template> : 기본 특의 구조를 정의한다. 웹 페이지에서 보이지 않는다.
  <slit> : 마크업을 채우기 위한 데이터를 지정한다.
  • 슬롯대상 : <slot name="slot_name"><p>슬롯 기본모양</p></slot>
  • 슬롯값 : <div slot="slot_name"><b>슬롯에</b> 채워질 모양</div>
  • 슬롯 대상이 슬롯 값 으로 바뀐다.
• customElement의 태그네임을 component-test 처럼 -가 최고 하나 있어야한다.
  아니면 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': "componenttest" is not a valid custom element name 처럼 에러남
  Name for the new custom element. Note that custom element names must contain a hyphen. (링크)

template 코드

---

---

테스트

클릭시 요소 생성일시을 알려줍니다. slot2 slot3 slot1 slot3 slot1-같은 명칭으로 여러개 사용가능 slot1-1 slot1-2 slot1-3 코멘트. 이 값은 안보입니다. 커스텀 엘레멘트 속에서 다른 커스텀 엘레멘트 사용

extends:'p' 와 is="component-test3" 를 사용 asd