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>반응형
'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 |