Recent Posts
Today
Total
관리 메뉴

KorSA

[ JavaScript ES 6 ] 커스텀 태그 본문

Knowledge Wiki/Javascript

[ JavaScript ES 6 ] 커스텀 태그

Praiv. 2021. 12. 17. 17:59
320x100

1. 커스텀태그
    길고 복잡한 HTML을 축약하는 법
    html 중복제거, 다른 페이지에서 재활용 가능하기 때문에 커스텀 태그 사용
    커스텀 태그 안에서도 파라미터 문법 구현 가능
    attribute 변경 감지기능 제공, Vue.js의 props처럼 동작하게 구현할 수 있음
    React, Vue가 커스텀태그 역할을 잘 지원해줌

<body>
  <custom-input name="pwd"></custom-input>
  <script>
    class myClass extends HTMElement{
    <!-- 직접 만든 태그가 HTML에 장착될 때 실행할 코드 적는 곳 -->
    connectedCallback(){
      let name = this.getAttribute('name');
      this.innerHTML = `<label>${name}인풋입니다</label><input>`

      <!-- innerHTML은 HTML 생성이 좀 느려서 아래 방식으로 만드는 걸 추천 -->

      let lbl = documnet.createElement('label');
          this.appendChild(lbl);
      }

      static get observedAttributes(){
          return ['name'];
      }

      attributeChangedCallback(){
      }
    }

    customElements.define('custom-input', myClass);
  </script>
</body>
728x90
728x90

'Knowledge Wiki > Javascript' 카테고리의 다른 글

[ JavaScript ES 6 ] HTML 모듈화  (0) 2021.12.17
[ JavaScript ES 6 ] Shadow DOM  (0) 2021.12.17
[ JavaScript ES 6 ] Map, Set  (0) 2021.12.17
[ JavaScript ES 6 ] Symbol 사용법  (0) 2021.12.17
[ JavaScript ES 6 ] for in, for of 반복문  (0) 2021.12.17
'Knowledge Wiki/Javascript' Related Articles more
Comments