[ JavaScript ES 6 ] HTML 모듈화

1. HTML 모듈화
    Web Component에 스타일 넣고 싶을 때 Shadow DOM 쓰면 좋음
    Shadow DOM에서 작업한 스타일은 다른 컴포넌트에 영향을 주지 않음

2. innerHTML에 직접 HTML 코드를 하드코딩으로 박지 말고 HTML 임시보관함인 <template>을 사용하시길.

<template id="template1">
  <label>이메일 입력 ㄱㄱ</label><input>
  <style>label{color: red}</style>
</template>

<script>
  class myClass extends HTMLElement {
    connectedCallback(){
      this.attachShadow({mode: 'open'});
      this.shadowRoot.append(template1.content.cloneNode(true));

      // shadow DOM에 이벤트리스너도 부착가능
      let el = this.shadowRoot.querySelector('label');
      el.addEventListener('click', function(){
	      console.log('클릭함');
      })
    }
  }
</script>