728x90
정의 규칙
글자 가운데 -를 하나 이상 포함해야 한다.
사용법 예시
<!DOCTYPE html>
<html>
<head>
<script src="../src/CurrentTime.js"></script>
</head>
<body>
<current-time>
<!– fallback value –>
6/11/2017, 11:55:49
</current-time>
</body>
</html>
class CurrentTime extends HTMLElement {
constructor() {
// 클래스 초기화. 속성이나 하위 노드는 접근할 수는 없다.
super();
}
static get observedAttributes() {
// 모니터링 할 속성 이름
return ['locale'];
}
connectedCallback() {
// DOM에 추가되었다. 렌더링 등의 처리를 하자.
this.start();
}
disconnectedCallback() {
// DOM에서 제거되었다. 엘리먼트를 정리하는 일을 하자.
this.stop();
}
attributeChangedCallback(attrName, oldVal, newVal) {
// 속성이 추가/제거/변경되었다.
this[attrName] = newVal;
}
adoptedCallback(oldDoc, newDoc) {
// 다른 Document에서 옮겨져 왔음
// 자주 쓸 일은 없을 것.
}
start() {
// 필요에 따라 메서드를 추가할 수 있다.
// 이 클래스 인스턴스는 HTMLElement이다.
// 따라서 `document.querySelector('current-time').start()`로 호출할 수 있다.
this.stop();
this._timer = window.setInterval(() => {
this.innerText = new Date().toLocaleString(this.locale);
}, 1000);
}
stop() {
// 이 메서드 역시 CurrentTime클래스의 필요에 의해 추가했다.
if (this._timer) {
window.clearInterval(this._timer);
this._timer = null;
}
}
}
// <current-time> 태그가 CurrentTime 클래스를 사용하도록 한다.
customElements.define('current-time', CurrentTime);
declare global {
interface Window { MyNamespace: any; }
}
window.MyNamespace = window.MyNamespace || {};Constructor( )
class 내에서 객체를 생성하고 초기화하기 위한 메서드이다.
class는 constructor 메서드를 하나씩만 가질 수 있다.
Reference
반응형
