JavaScript로 CustomElement 작성법 #
이 글은 Javascript로 Custom HTMLElemnet를 만드는 방법을 포함합니다.
이 글은 Node.js와 npm의 기능에 대해 설명하지 않습니다.
Custom Tag를 확인하기 위해 Node와 npm(node package manager)를 사용했습니다.(별도의 환경에서도 확인 가능합니다.)
Custom HTMLElement만들기 #
custom-tag.js
class CustomElement extends HTMLElement {
constructor() {
super();
// Create a shadow root.
const shadowRoot = this.attachShadow({ mode: "open" });
const button = document.createElement("input");
button.type = "button";
button.value = "my button";
shadowRoot.appendChild(button);
}
}
customElements.define("my-custom-tag", CustomElement);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>index</title>
<script type="module" src="./custom-tag.js"></script>
</head>
<body>
<my-custom-tag></my-custom-tag>
</body>
</html>
Command 창을 띄워서 custom-tag.js, index.js가 있는 폴더로 이동합니다.
someDir>npm i -D serve
someDir>npx serve
┌──────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - Network: http://127.0.0.1:3000 │
│ │
│ Copied local address to clipboard! │
│ │
└──────────────────────────────────────────┘
HTTP 2023. 10. 10. 오전 11:33:35 ::1 GET /
HTTP 2023. 10. 10. 오전 11:33:35 ::1 Returned 200 in 20 ms
HTTP 2023. 10. 10. 오전 11:33:35 ::1 GET /customtag.js
HTTP 2023. 10. 10. 오전 11:33:35 ::1 Returned 200 in 2 ms
HTTP 2023. 10. 10. 오전 11:33:35 ::1 GET /favicon.ico
HTTP 2023. 10. 10. 오전 11:33:35 ::1 Returned 404 in 4 ms
서버가 시작되면 local url로 접속합니다.
위와 같이 custom tag가 생성되었습니다.
Custom Tag 생명 주기 콜백 #
connectedCallback() {
// custom tag가 document의 DOM에서 연결 되었을 때마다 호출됩니다.
console.log("connected");
}
disconnectedCallback() {
// custom tag가 document의 DOM에서 연결해제 되었을 때마다 호출됩니다.
console.log("this connected");
}
attributeChangedCallback(name, oldValue, newValue) {
// custom tag의 속성이 변경 되었을 때 호출됩니다.
// name = 변경된 속성 이름
// oldValue = 변경되기 전 값
// newValue = 새로운 값
/* attributeChangedCallback 함수는
static get observedAttributes() {
return ['attrName'];
} 와 함께 사용됩니다. */
console.log(`${name} is changed. oldValue = ${oldValue}, newValue = ${newValue}`);
}
다음 포스트엔 커스텀태그의 스타일 변경과 활용 예제를 포스팅하겠습니다.