Web components로 커스텀 html태그 만들기

반복되는 html태그가 있으면 하나의 태그로 축약하고 싶을때가 있다.

이럴땐, Web components인 js문법으로 구현할 수 있는 브라우저 기본 기능을 이용하면 된다.

customElements.define('custom-input',HTML~);

이렇게, custom-input처럼 작명을 해주고 뒤에는 html태그를 넣으면 된다. html은 클래스형태로 넣어주면 된다.

<custom-input></custom-input>

<script>

	class 클래스 extends HTMLElement {
		connectedCallback() {//내가 만든 태그가 HTML에 장착될 때 실행할 코드를 적는 곳
    			this.innerHTML = `
            			<label>이메일인풋이에요</label>
                		<input>
            		`
        	}
    	}

	customElements.define('custom-input',클래스);
    
</script>

위처럼 class을 만들고, connectedCallback() {}에 this를 써서 custom-input태그에 들어갈 html을 작성해준다.

여기서, this는 새로 생성될 <custom-input>요소를 뜻한다. 그래서 이 요소에 innerHTML을 써서 넣어주면 된다.

혹은,

let 변수 = document.createElement('label');
this.appendChild(변수);

이렇게, 변수에 저장해서 변수를 넣어주는 방법도 있다.

 

즉, 커스텀태그의 장점은 html중복제거, 다른페이지에서 재활용이 가능하다.

 

그리고 커스텀태그 안에서도 파라미터문법같은걸 구현할 수 있다.

<custom-input name="비번"></custom-input>
<custom-input name="이메일"></custom-input>

<script>

	class 클래스 extends HTMLElement {
		connectedCallback() {//내가 만든 태그가 HTML에 장착될 때 실행할 코드를 적는 곳
        		let name = this.getAttribute('name');
    			this.innerHTML = `
            			<label>${name}인풋이에요</label>
                		<input>
            		`
        }
        static get observedAttributes() { //name이라는 attribute가 바뀌는지 감시해주세요
        		return ['name']
        }
        attributeChangedCallback() { //바뀌면 이거 실행해줌
        		console.log(this.getAttribute('name'));
        }

	customElements.define('custom-input',클래스);
    
</script>

위처럼, 태그에 name을 주고, 클래스 내부에서 getAttribute를 이용해 변수에 저장하고 파라미터처럼 사용할 수 있다.

그리고, attribute가 바뀌면 자동으로 변경을 감지해서 재렌더링하는 기능을 제공한다.

재렌더링문법이 맘에 들면 Lit과 Stencil같은 라이브러리를 써도 좋다.