앞에서 Custom Element ( tutorial28.html )에서 커스텀 엘리먼트의 기본적인 사용법에 대해서 배웠다.
많이 사용되는 div를 이용해서 커스텀 엘리먼트를 만들어 보자.
//HTML
<div is="scroll-effect-element" id="scrolltest_two"></div>
//SCRIPT
class ScrollEffectElement extends HTMLDivElement {
constructor () {
super ();
this._title = null;
}
connectedCallback() {
this.innerHTML = "<b>custom div element test!</b>";
}
disconnectedCallback() {
}
//속성을 사용하는 경우에 다음 두함수를 추가 한다.
//observedAttributes, attributeChangedCallback
static get observedAttributes () {
return [ 'title', 'disabled'];
}
attributeChangedCallback (name, oldValue, newValue) {
if(name === 'disabled') {
if(newValue !== oldValue) {
if(newValue)
this.style.color = 'lightgray';
else
this.style.color = 'black';
}
}
console.log(newValue);
}
get disabled () {
return this.getAttribute('disabled');
}
set disabled (v) {
this.setAttribute ( 'disabled', v);
}
}
customElements.define( 'scroll-effect-element', ScrollEffectElement, {extends: 'div'});
let list = document.getElementById('scrolltest_two');
list.setAttribute( 'title', 'this is scrollEffectElement' );
//list.setAttribute('disabled', 'true');
list.disabled = true; //list.setAttribute와 같은 기능
console.log('HTMLDivElement disabled = ' + list.disabled);
<div is="scroll-effect-element" id="scrolltest_two"></div>
//SCRIPT
class ScrollEffectElement extends HTMLDivElement {
constructor () {
super ();
this._title = null;
}
connectedCallback() {
this.innerHTML = "<b>custom div element test!</b>";
}
disconnectedCallback() {
}
//속성을 사용하는 경우에 다음 두함수를 추가 한다.
//observedAttributes, attributeChangedCallback
static get observedAttributes () {
return [ 'title', 'disabled'];
}
attributeChangedCallback (name, oldValue, newValue) {
if(name === 'disabled') {
if(newValue !== oldValue) {
if(newValue)
this.style.color = 'lightgray';
else
this.style.color = 'black';
}
}
console.log(newValue);
}
get disabled () {
return this.getAttribute('disabled');
}
set disabled (v) {
this.setAttribute ( 'disabled', v);
}
}
customElements.define( 'scroll-effect-element', ScrollEffectElement, {extends: 'div'});
let list = document.getElementById('scrolltest_two');
list.setAttribute( 'title', 'this is scrollEffectElement' );
//list.setAttribute('disabled', 'true');
list.disabled = true; //list.setAttribute와 같은 기능
console.log('HTMLDivElement disabled = ' + list.disabled);
1. HTML 추가
<div is="scroll-effect-element" id="scrolltest_two"></div>
HTMLDivElement 요소를 상속해서 만들었기 때문에 "-"가 들어 이름을 is에 지정한다.
2. HTML 지정
customElements.define( 'scroll-effect-element', ScrollEffectElement, {extends: 'div'});
자바스크립트에서 customElements.define을 지정한다.
3. ScrollEffectElement
자바스크립트에서 클래스를 만드는 방법에 대해서 설명한다.
다음 함수는 필수적으로 추가 하는것이 좋다.
constructor(), connectedCallback(), disconnectedCallback()
속성을 사용하는 경우에는 다음 두함수를 추가 한다.
observedAttributes(), attributeChangedCallback()
observedAttributes 함수로 감시할 속성을 지정하고, 속성이 바뀌면 attributeChangedCallback 함수가 호출된다.
4. 필요한 속성을 추가한다.
여기서는 title, disabled 속성을 추가 하였다.
title 속성은 출력할 문자열 속성이다.
disabled 속성은 요소의 enable, disable 속성을 관리 하기 위해서 추가한다.
속성을 추가하면 요소의 attribute로 다음과 같이 추가 된다.
5. attributeChangedCallback에서 속성에 대한 명령을 처리한다.
속성에 대한 명령을 set disabled에서 하지 않고 attributeChangedCallback에서 처리하면 클래스 명령 대신 요소의 setAttribute 명령으로도 클래스를 제어 할수 있다.
let list = document.getElementById('scrolltest_two');
list.setAttribute('disabled', 'true');
if(name === 'disabled') {
if(newValue !== oldValue) {
if(newValue === 'true')
this.style.color = 'lightgray';
else
this.style.color = 'black';
}
}
if(newValue !== oldValue) {
if(newValue === 'true')
this.style.color = 'lightgray';
else
this.style.color = 'black';
}
}
다운로드 : custom_htmldivelement.html