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 코드

<template id="template-component-test">
            <style>
                .node-wrap{color:red; border:2px solid #999; padding:5px; margin:5px; border-radius: 0.5em;}
                .node-wrap:hover{filter:sepia(1) hue-rotate(200deg); background-color: #eee;}
                .slot-wrap{display: inline-block; color: #000;}
            </style>
            <div class="node-wrap">
                <b>&lt;component-test&gt;</b> 는 자동으로 내용이 바뀝니다. 
                <div class="slot-wrap">(<slot name="slot1">slot1 값이 없습니다.</slot>)</div>
                <div class="slot-wrap">(<slot name="slot2">slot2 값이 없습니다.</slot>)</div>
                <div class="slot-wrap">(<slot name="slot3">slot3 값이 없습니다.</slot>)</div>
            </div>
        </template>

<template id="template-component-test2">
            <style>
                .node-wrap{color:blue; border:2px solid #999; padding:5px; margin:5px; border-radius: 10em; display: inline-block;}
            </style>
            <span class="node-wrap">&lt;component-test2</span>
        </template>

테스트

클릭시 요소 생성일시을 알려줍니다. slot2 slot3

slot1 slot3

slot1-같은 명칭으로 여러개 사용가능 slot1-1 slot1-2 slot1-3

코멘트. 이 값은 안보입니다.

커스텀 엘레멘트 속에서 다른 커스텀 엘레멘트 사용

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