JS의 Custom Element를 생성하는 방법에 대해 알아보자.
class YourClassName extends HTMLElement {
constructor() {
super();
// HTML 내용
this.innerHTML = `
<div class="test">
<h1>My name is</h1>
</div>
`;
}
}
// Custom Element 정의 부분
// 첫 번째 파라미터: Custom Element 이름
// 두 번째 파라미터: Custom Element Class
customElements.define('your-element-name', YourClassName);
위와 같이 작성할 수도 있고 아래와 같이 작성할 수도 있다.
class YourClassName extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<div class="test">
<h1>My name is</h1>
</div>
`;
}
}
customElements.define('your-element-name', YourClassName);
이런식으로 Custom Element를 정의하면 HTML 내에서 다음과 같이 Custom Element를 사용할 수 있다.
<your-element-name></your-element-name>
만약 이 곳에 attribute를 추가하고 싶다면 다음과 같이 작성할 수 있다.
class YourClassName extends HTMLElement {
constructor() {
super();
// this.getAttribute('attribute 이름')으로 attribute 값 가져올 수 있음.
const yourAttribute = this.getAttribute('yourAttributeName');
this.innerHTML = `
<div class="test">
<h1>My name is ${ yourAttribute }</h1>
</div>
`;
}
}
<your-element-name yourAttributeName="yourName"></your-element-name>
만약 Attribute가 변경되는지 감지하고 싶다면 아래 코드를 사용하면 된다.
class MyElement extends HTMLElement {
constructor() {
super();
const name = this.getAttribute('name');
this.innerHTML = `
<label>email input ${ name }</label>
<input>
`;
}
static get observedAttributes() {
return [ 'yourAttributeName' ]; // 감지할 Attribute 이름들
}
attributeChangedCallback() {
// your code
}
}
class MyElement extends HTMLElement {
constructor() {
super();
const name = this.getAttribute('name');
this.innerHTML = `
<label>email input ${ name }</label>
<input>
`;
}
static get observedAttributes() {
return [ 'yourAttributeName' ];
}
attributeChangedCallback() {
console.log(this.getAttribute('yourAttributeName');
}
}
class MyElement extends HTMLElement {
constructor() {
super();
const name = this.getAttribute('name');
this.innerHTML = `
<label>email input ${ name }</label>
<input>
`;
}
static get observedAttributes() {
return [ 'yourAttributeName' ];
}
attributeChangedCallback() {
// SPA(React, Vue)처럼 재렌더링 가능
this.innerHTML = `
<label>email input ${ name }</label>
<input>
`
}
}
이걸 보고 html를 배우기로 결심했어요 히히