HTMLElement 뿐만 아니라 특정 HTML 엘리먼트를 상속하여 커스터마이징 할 수 있다.
-
특정 HTMLElement를 상속해서 클래스를 작성한다. 예제에서는 HTMLSpanElement 객체상속 했다.
-
customElements.define('컴스텀-엘리먼트명', 클래스명, { extends: 특정Tag명 });
-
Span Tag에 is="커스텀-엘리먼트명" 속성을 추가한다.
<span is="add-ok">I love you
※ 기존 HTML Tag 를 그대로 사용하며 기능을 확장한다.
<!DOCTYPE html>
<html lang="kr">
<head>
</head>
<body>
<span is="add-ok">I love you </span>
<script type="text/javascript">
class AddOk extends HTMLSpanElement {
constructor() {
super();
this.innerText += ' OK!!';
}
}
customElements.define('add-ok', AddOk, { extends: 'span' });
</script>
</body>
</html>
그냥 늙은 개발자