본문 바로가기
Front-End: Web/JavaScript

[코딩애플] js part 3-11. shadow DOM과 template으로 HTML 모듈화하기

all.silver__ 2022. 10. 22. 22:49
반응형

shadow DOM과 template으로 HTML 모듈화하기

shadow DOM이란?

가끔 보면 복잡한 HTML 태그가 있는데, 

<input type="range">

이렇게 작성하면 <div> 두세 개로 만들어진 것 같은(실은 맞음) range input이 뜬다. 이게 어떻게 가능할까? shadow DOM 덕분이다.

이게 div 태그가 맞는지 확인해보자.

![](.\images\01.png)

확인하고 싶다면 개발자 도구에 설정 > Preferences > Elements > 'Show user agent shadow DOM' 옵션을 체크한다. 그러면 이제 input 태그를 까볼 수 있다.

이제 다시 보면,

![](.\images\02.png)

div 3개로 이뤄진 걸 확인할 수 있다. 어떻게 숨길 수 있었을까!

이처럼 <input> 태그 하나를 써서 <div> 태그 세 개가 나오도록 하는 걸 shadow DOM으로 할 수 있다.

shadow DOM 만드는 법

shadow DOM으로 HTML 태그 안에다가 몰래 HTML 태그를 숨겨보자.

  1. attachShadow 붙이기 (실은 shadowRoot를 열어주는 함수)
<body>
    <div id="mordor"></div>
    <script>
    	document.querySelector("#morder").attachShadow({mode:'open'});
    </script>
</body>

![](.\images\03.png)

  1. shadowRoot에 태그들 넣기
document.querySelector("#morder").attachShadow({mode:'open'});
document.querySelector("#morder").shadowRoot.innerHTML = '<p>심연에서 왔도다</p>';

![](.\images\04.png)

그러면 이렇게 뜬다. 일반 유저에게는 그냥 <div>하나만 뜨겠지만, 실은 shadowRoot 공간 안에 <p>태그가 숨겨져 있다.

이걸 왜 쓸까? 코드로 보면

<div>
	<p>심연에서 왔도다</p>
</div>

이거랑 똑같은데. 동작 방식은 같되, 쌩코딩이 더 빠를 것 같은데 shadowRoot는 왜 쓰는 걸까.

Web Components + shadow DOM = 완벽한 HTML 모듈

지난번에 Web Components를 사용하면, 여러 태그를 담은 custom 태그 하나로 만들 수 있다고 했다.

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `<label>이메일을 입력하쇼</label><input>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

근데 Web Component에 스타일도 넣고 싶다면?

this.innerHTML에 <style>도 넣으면 되는 거 아닌가?

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `<label>이메일을 입력하쇼</label><input>
            <style>label { color : red }</styel>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

근데 이 방법은 좀 위험하다. 왜냐하면 다른 <label> 태그를 써도 빨개지기 때문이다(스타일이 오염됨). 컴포넌트끼리 스타일 겹치고 그러면 난리난다. 그러려면 this.innerHTML에 class줘서 유니크하게 만들어줘야 하는데 그러기엔 또 귀찮다. class 끼리 또 중복이 생기면 어카냐고. 많은 문제가 있다.

대신 Shadow DOM에 스타일 코드들을 다 넣으면 편리하게 적용할 수 있다!

this.innerHTML에 있는 내용들은, 그냥 <태그> 안에 <태그>를 넣는 문법일 뿐이다. 근데 Shadow DOM이라는 shadowRoot 공간에 다 넣게 되면 shadow DOM 안에서만 놀고, 외부에 영향을 주지 않는다. 분리를 할 수 있다는 거다. 즉, css를 막 짜도 된다는 거다. 막 짜도 다른 라벨 태그를 안 건드리게 된다.

그럼 이제 이 태그들을 shadow DOM으로 짜보자!

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.attachShadow({mode: 'open'});
            this.shadowRoot.innerHTML = `<label>이메일을 입력하쇼</label><input>
            <style>label { color : red }</styel>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

아까랑 동작 방식도 똑같고 보이는 것도 똑같다. 대신 shadow DOM 안에서만 놀기 때문에 외부에 영향을 끼치는 부작용이 전혀 없다. 완전히 독립적인 공간이다.

이렇게 하면 진정한 의미의 HTML 모듈화를 할 수 있다.

Web Component 특징

  • 그냥 짜면 드러움

`백틱`안에 코드를 다 작성해야 하는데, 근데 이렇게 작성하면 좀 더럽다. 그래서 더 깔끔하게 짜기 위해선 **<HTML 임시보관함>**을 쓰자. HTML을 다른 태그에 임시로 보관해놨다가 innerHTML에 붙여서 개발할 수 있다. 이렇게 하도록 도와주는게 바로 <template> 태그다.

HTML 임시보관함 <template> 태그

여기에 쓴 태그들은 웹에 렌더링이 되지 않는다.

<template id="template1">
	<label>이메일을 입력하쇼</label><input>
    <style>label { color : red }</styel>
</template>

그래서 Web component에 넣고 싶은 긴 HTML 태그들 내용들을 <template>에 넣고, 여기에 id를 지정해서 옮기면 된다.

class 클래스 extends HTMLElement {
    connectedCallback(){
        this.attachShadow({mode: 'open'});
        this.shadowRoot.append(template1.content.cloneNode(true));
    }
}
customElements.define('custom-input', 클래스);

하지만 Web Component 생성을 도와주는 라이브러리들이 많다. Lit 이런거. 심지어 Stencil은 props , state도 지원한다. 나아가 웹앱을 만들고 싶으면 React, Vue를 사용하면 된다.

shadow DOM에 이벤트리스너도 부착가능

class 클래스 extends HTMLElement {
    connectedCallback(){
        this.attachShadow({mode: 'open'});
        this.shadowRoot.append(template1.content.cloneNode(true));
        
        let el = this.shadowRoot.querySelector('label');
        el.addEventListener('click', function(){
           console.log('클릭함'); 
        });
    }
}
customElement.define('custom-input', 클래스);

근데 이것도 복잡해보인다. 그러면 class 안에서 함수로 빼서 축약할 수 있다.

shadow DOM과 template으로 HTML 모듈화하기

shadow DOM이란?

가끔 보면 복잡한 HTML 태그가 있는데, 

<input type="range">

이렇게 작성하면 <div> 두세 개로 만들어진 것 같은(실은 맞음) range input이 뜬다. 이게 어떻게 가능할까? shadow DOM 덕분이다.

이게 div 태그가 맞는지 확인해보자.

![](.\images\01.png)

확인하고 싶다면 개발자 도구에 설정 > Preferences > Elements > 'Show user agent shadow DOM' 옵션을 체크한다. 그러면 이제 input 태그를 까볼 수 있다.

이제 다시 보면,

![](.\images\02.png)

div 3개로 이뤄진 걸 확인할 수 있다. 어떻게 숨길 수 있었을까!

이처럼 <input> 태그 하나를 써서 <div> 태그 세 개가 나오도록 하는 걸 shadow DOM으로 할 수 있다.

shadow DOM 만드는 법

shadow DOM으로 HTML 태그 안에다가 몰래 HTML 태그를 숨겨보자.

  1. attachShadow 붙이기 (실은 shadowRoot를 열어주는 함수)
<body>
    <div id="mordor"></div>
    <script>
    	document.querySelector("#morder").attachShadow({mode:'open'});
    </script>
</body>

![](.\images\03.png)

  1. shadowRoot에 태그들 넣기
document.querySelector("#morder").attachShadow({mode:'open'});
document.querySelector("#morder").shadowRoot.innerHTML = '<p>심연에서 왔도다</p>';

![](.\images\04.png)

그러면 이렇게 뜬다. 일반 유저에게는 그냥 <div>하나만 뜨겠지만, 실은 shadowRoot 공간 안에 <p>태그가 숨겨져 있다.

이걸 왜 쓸까? 코드로 보면

<div>
	<p>심연에서 왔도다</p>
</div>

이거랑 똑같은데. 동작 방식은 같되, 쌩코딩이 더 빠를 것 같은데 shadowRoot는 왜 쓰는 걸까.

Web Components + shadow DOM = 완벽한 HTML 모듈

지난번에 Web Components를 사용하면, 여러 태그를 담은 custom 태그 하나로 만들 수 있다고 했다.

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `<label>이메일을 입력하쇼</label><input>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

근데 Web Component에 스타일도 넣고 싶다면?

this.innerHTML에 <style>도 넣으면 되는 거 아닌가?

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `<label>이메일을 입력하쇼</label><input>
            <style>label { color : red }</styel>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

근데 이 방법은 좀 위험하다. 왜냐하면 다른 <label> 태그를 써도 빨개지기 때문이다(스타일이 오염됨). 컴포넌트끼리 스타일 겹치고 그러면 난리난다. 그러려면 this.innerHTML에 class줘서 유니크하게 만들어줘야 하는데 그러기엔 또 귀찮다. class 끼리 또 중복이 생기면 어카냐고. 많은 문제가 있다.

대신 Shadow DOM에 스타일 코드들을 다 넣으면 편리하게 적용할 수 있다!

this.innerHTML에 있는 내용들은, 그냥 <태그> 안에 <태그>를 넣는 문법일 뿐이다. 근데 Shadow DOM이라는 shadowRoot 공간에 다 넣게 되면 shadow DOM 안에서만 놀고, 외부에 영향을 주지 않는다. 분리를 할 수 있다는 거다. 즉, css를 막 짜도 된다는 거다. 막 짜도 다른 라벨 태그를 안 건드리게 된다.

그럼 이제 이 태그들을 shadow DOM으로 짜보자!

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.attachShadow({mode: 'open'});
            this.shadowRoot.innerHTML = `<label>이메일을 입력하쇼</label><input>
            <style>label { color : red }</styel>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

아까랑 동작 방식도 똑같고 보이는 것도 똑같다. 대신 shadow DOM 안에서만 놀기 때문에 외부에 영향을 끼치는 부작용이 전혀 없다. 완전히 독립적인 공간이다.

이렇게 하면 진정한 의미의 HTML 모듈화를 할 수 있다.

Web Component 특징

  • 그냥 짜면 드러움

`백틱`안에 코드를 다 작성해야 하는데, 근데 이렇게 작성하면 좀 더럽다. 그래서 더 깔끔하게 짜기 위해선 **<HTML 임시보관함>**을 쓰자. HTML을 다른 태그에 임시로 보관해놨다가 innerHTML에 붙여서 개발할 수 있다. 이렇게 하도록 도와주는게 바로 <template> 태그다.

HTML 임시보관함 <template> 태그

여기에 쓴 태그들은 웹에 렌더링이 되지 않는다.

<template id="template1">
	<label>이메일을 입력하쇼</label><input>
    <style>label { color : red }</styel>
</template>

그래서 Web component에 넣고 싶은 긴 HTML 태그들 내용들을 <template>에 넣고, 여기에 id를 지정해서 옮기면 된다.

class 클래스 extends HTMLElement {
    connectedCallback(){
        this.attachShadow({mode: 'open'});
        this.shadowRoot.append(template1.content.cloneNode(true));
    }
}
customElements.define('custom-input', 클래스);

하지만 Web Component 생성을 도와주는 라이브러리들이 많다. Lit 이런거. 심지어 Stencil은 props , state도 지원한다. 나아가 웹앱을 만들고 싶으면 React, Vue를 사용하면 된다.

shadow DOM에 이벤트리스너도 부착가능

class 클래스 extends HTMLElement {
    connectedCallback(){
        this.attachShadow({mode: 'open'});
        this.shadowRoot.append(template1.content.cloneNode(true));
        
        let el = this.shadowRoot.querySelector('label');
        el.addEventListener('click', function(){
           console.log('클릭함'); 
        });
    }
}
customElement.define('custom-input', 클래스);

근데 이것도 복잡해보인다. 그러면 class 안에서 함수로 빼서 축약할 수 있다.

shadow DOM과 template으로 HTML 모듈화하기

shadow DOM이란?

가끔 보면 복잡한 HTML 태그가 있는데, 

<input type="range">

이렇게 작성하면 <div> 두세 개로 만들어진 것 같은(실은 맞음) range input이 뜬다. 이게 어떻게 가능할까? shadow DOM 덕분이다.

이게 div 태그가 맞는지 확인해보자.

![](.\images\01.png)

확인하고 싶다면 개발자 도구에 설정 > Preferences > Elements > 'Show user agent shadow DOM' 옵션을 체크한다. 그러면 이제 input 태그를 까볼 수 있다.

이제 다시 보면,

![](.\images\02.png)

div 3개로 이뤄진 걸 확인할 수 있다. 어떻게 숨길 수 있었을까!

이처럼 <input> 태그 하나를 써서 <div> 태그 세 개가 나오도록 하는 걸 shadow DOM으로 할 수 있다.

shadow DOM 만드는 법

shadow DOM으로 HTML 태그 안에다가 몰래 HTML 태그를 숨겨보자.

  1. attachShadow 붙이기 (실은 shadowRoot를 열어주는 함수)
<body>
    <div id="mordor"></div>
    <script>
    	document.querySelector("#morder").attachShadow({mode:'open'});
    </script>
</body>

![](.\images\03.png)

  1. shadowRoot에 태그들 넣기
document.querySelector("#morder").attachShadow({mode:'open'});
document.querySelector("#morder").shadowRoot.innerHTML = '<p>심연에서 왔도다</p>';

![](.\images\04.png)

그러면 이렇게 뜬다. 일반 유저에게는 그냥 <div>하나만 뜨겠지만, 실은 shadowRoot 공간 안에 <p>태그가 숨겨져 있다.

이걸 왜 쓸까? 코드로 보면

<div>
	<p>심연에서 왔도다</p>
</div>

이거랑 똑같은데. 동작 방식은 같되, 쌩코딩이 더 빠를 것 같은데 shadowRoot는 왜 쓰는 걸까.

Web Components + shadow DOM = 완벽한 HTML 모듈

지난번에 Web Components를 사용하면, 여러 태그를 담은 custom 태그 하나로 만들 수 있다고 했다.

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `<label>이메일을 입력하쇼</label><input>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

근데 Web Component에 스타일도 넣고 싶다면?

this.innerHTML에 <style>도 넣으면 되는 거 아닌가?

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `<label>이메일을 입력하쇼</label><input>
            <style>label { color : red }</styel>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

근데 이 방법은 좀 위험하다. 왜냐하면 다른 <label> 태그를 써도 빨개지기 때문이다(스타일이 오염됨). 컴포넌트끼리 스타일 겹치고 그러면 난리난다. 그러려면 this.innerHTML에 class줘서 유니크하게 만들어줘야 하는데 그러기엔 또 귀찮다. class 끼리 또 중복이 생기면 어카냐고. 많은 문제가 있다.

대신 Shadow DOM에 스타일 코드들을 다 넣으면 편리하게 적용할 수 있다!

this.innerHTML에 있는 내용들은, 그냥 <태그> 안에 <태그>를 넣는 문법일 뿐이다. 근데 Shadow DOM이라는 shadowRoot 공간에 다 넣게 되면 shadow DOM 안에서만 놀고, 외부에 영향을 주지 않는다. 분리를 할 수 있다는 거다. 즉, css를 막 짜도 된다는 거다. 막 짜도 다른 라벨 태그를 안 건드리게 된다.

그럼 이제 이 태그들을 shadow DOM으로 짜보자!

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.attachShadow({mode: 'open'});
            this.shadowRoot.innerHTML = `<label>이메일을 입력하쇼</label><input>
            <style>label { color : red }</styel>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

아까랑 동작 방식도 똑같고 보이는 것도 똑같다. 대신 shadow DOM 안에서만 놀기 때문에 외부에 영향을 끼치는 부작용이 전혀 없다. 완전히 독립적인 공간이다.

이렇게 하면 진정한 의미의 HTML 모듈화를 할 수 있다.

Web Component 특징

  • 그냥 짜면 드러움

`백틱`안에 코드를 다 작성해야 하는데, 근데 이렇게 작성하면 좀 더럽다. 그래서 더 깔끔하게 짜기 위해선 **<HTML 임시보관함>**을 쓰자. HTML을 다른 태그에 임시로 보관해놨다가 innerHTML에 붙여서 개발할 수 있다. 이렇게 하도록 도와주는게 바로 <template> 태그다.

HTML 임시보관함 <template> 태그

여기에 쓴 태그들은 웹에 렌더링이 되지 않는다.

<template id="template1">
	<label>이메일을 입력하쇼</label><input>
    <style>label { color : red }</styel>
</template>

그래서 Web component에 넣고 싶은 긴 HTML 태그들 내용들을 <template>에 넣고, 여기에 id를 지정해서 옮기면 된다.

class 클래스 extends HTMLElement {
    connectedCallback(){
        this.attachShadow({mode: 'open'});
        this.shadowRoot.append(template1.content.cloneNode(true));
    }
}
customElements.define('custom-input', 클래스);

하지만 Web Component 생성을 도와주는 라이브러리들이 많다. Lit 이런거. 심지어 Stencil은 props , state도 지원한다. 나아가 웹앱을 만들고 싶으면 React, Vue를 사용하면 된다.

shadow DOM에 이벤트리스너도 부착가능

class 클래스 extends HTMLElement {
    connectedCallback(){
        this.attachShadow({mode: 'open'});
        this.shadowRoot.append(template1.content.cloneNode(true));
        
        let el = this.shadowRoot.querySelector('label');
        el.addEventListener('click', function(){
           console.log('클릭함'); 
        });
    }
}
customElement.define('custom-input', 클래스);

근데 이것도 복잡해보인다. 그러면 class 안에서 함수로 빼서 축약할 수 있다.

shadow DOM과 template으로 HTML 모듈화하기

shadow DOM이란?

가끔 보면 복잡한 HTML 태그가 있는데, 

<input type="range">

이렇게 작성하면 <div> 두세 개로 만들어진 것 같은(실은 맞음) range input이 뜬다. 이게 어떻게 가능할까? shadow DOM 덕분이다.

이게 div 태그가 맞는지 확인해보자.

![](.\images\01.png)

확인하고 싶다면 개발자 도구에 설정 > Preferences > Elements > 'Show user agent shadow DOM' 옵션을 체크한다. 그러면 이제 input 태그를 까볼 수 있다.

이제 다시 보면,

![](.\images\02.png)

div 3개로 이뤄진 걸 확인할 수 있다. 어떻게 숨길 수 있었을까!

이처럼 <input> 태그 하나를 써서 <div> 태그 세 개가 나오도록 하는 걸 shadow DOM으로 할 수 있다.

shadow DOM 만드는 법

shadow DOM으로 HTML 태그 안에다가 몰래 HTML 태그를 숨겨보자.

  1. attachShadow 붙이기 (실은 shadowRoot를 열어주는 함수)
<body>
    <div id="mordor"></div>
    <script>
    	document.querySelector("#morder").attachShadow({mode:'open'});
    </script>
</body>

![](.\images\03.png)

  1. shadowRoot에 태그들 넣기
document.querySelector("#morder").attachShadow({mode:'open'});
document.querySelector("#morder").shadowRoot.innerHTML = '<p>심연에서 왔도다</p>';

![](.\images\04.png)

그러면 이렇게 뜬다. 일반 유저에게는 그냥 <div>하나만 뜨겠지만, 실은 shadowRoot 공간 안에 <p>태그가 숨겨져 있다.

이걸 왜 쓸까? 코드로 보면

<div>
	<p>심연에서 왔도다</p>
</div>

이거랑 똑같은데. 동작 방식은 같되, 쌩코딩이 더 빠를 것 같은데 shadowRoot는 왜 쓰는 걸까.

Web Components + shadow DOM = 완벽한 HTML 모듈

지난번에 Web Components를 사용하면, 여러 태그를 담은 custom 태그 하나로 만들 수 있다고 했다.

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `<label>이메일을 입력하쇼</label><input>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

근데 Web Component에 스타일도 넣고 싶다면?

this.innerHTML에 <style>도 넣으면 되는 거 아닌가?

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `<label>이메일을 입력하쇼</label><input>
            <style>label { color : red }</styel>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

근데 이 방법은 좀 위험하다. 왜냐하면 다른 <label> 태그를 써도 빨개지기 때문이다(스타일이 오염됨). 컴포넌트끼리 스타일 겹치고 그러면 난리난다. 그러려면 this.innerHTML에 class줘서 유니크하게 만들어줘야 하는데 그러기엔 또 귀찮다. class 끼리 또 중복이 생기면 어카냐고. 많은 문제가 있다.

대신 Shadow DOM에 스타일 코드들을 다 넣으면 편리하게 적용할 수 있다!

this.innerHTML에 있는 내용들은, 그냥 <태그> 안에 <태그>를 넣는 문법일 뿐이다. 근데 Shadow DOM이라는 shadowRoot 공간에 다 넣게 되면 shadow DOM 안에서만 놀고, 외부에 영향을 주지 않는다. 분리를 할 수 있다는 거다. 즉, css를 막 짜도 된다는 거다. 막 짜도 다른 라벨 태그를 안 건드리게 된다.

그럼 이제 이 태그들을 shadow DOM으로 짜보자!

<custom-input></custom-input>
<script>
	class 클래스 extends HTMLElement {
        connectedCallback() {
            this.attachShadow({mode: 'open'});
            this.shadowRoot.innerHTML = `<label>이메일을 입력하쇼</label><input>
            <style>label { color : red }</styel>`;
        }
    }
    customElements.define("custom-input", 클래스);
</script>

아까랑 동작 방식도 똑같고 보이는 것도 똑같다. 대신 shadow DOM 안에서만 놀기 때문에 외부에 영향을 끼치는 부작용이 전혀 없다. 완전히 독립적인 공간이다.

이렇게 하면 진정한 의미의 HTML 모듈화를 할 수 있다.

Web Component 특징

  • 그냥 짜면 드러움

`백틱`안에 코드를 다 작성해야 하는데, 근데 이렇게 작성하면 좀 더럽다. 그래서 더 깔끔하게 짜기 위해선 **<HTML 임시보관함>**을 쓰자. HTML을 다른 태그에 임시로 보관해놨다가 innerHTML에 붙여서 개발할 수 있다. 이렇게 하도록 도와주는게 바로 <template> 태그다.

HTML 임시보관함 <template> 태그

여기에 쓴 태그들은 웹에 렌더링이 되지 않는다.

<template id="template1">
	<label>이메일을 입력하쇼</label><input>
    <style>label { color : red }</styel>
</template>

그래서 Web component에 넣고 싶은 긴 HTML 태그들 내용들을 <template>에 넣고, 여기에 id를 지정해서 옮기면 된다.

class 클래스 extends HTMLElement {
    connectedCallback(){
        this.attachShadow({mode: 'open'});
        this.shadowRoot.append(template1.content.cloneNode(true));
    }
}
customElements.define('custom-input', 클래스);

하지만 Web Component 생성을 도와주는 라이브러리들이 많다. Lit 이런거. 심지어 Stencil은 props , state도 지원한다. 나아가 웹앱을 만들고 싶으면 React, Vue를 사용하면 된다.

shadow DOM에 이벤트리스너도 부착가능

class 클래스 extends HTMLElement {
    connectedCallback(){
        this.attachShadow({mode: 'open'});
        this.shadowRoot.append(template1.content.cloneNode(true));
        
        let el = this.shadowRoot.querySelector('label');
        el.addEventListener('click', function(){
           console.log('클릭함'); 
        });
    }
}
customElement.define('custom-input', 클래스);

근데 이것도 복잡해보인다. 그러면 class 안에서 함수로 빼서 축약할 수 있다.

반응형
저작자표시

'Front-End: Web > JavaScript' 카테고리의 다른 글

[코딩애플] js part 3-13. Optional Chanining(?.) / Nullish Coalescing (??)  (0) 2022.10.22
[코딩애플] js part 3-12. class로 만들어보는 2D 게임  (0) 2022.10.22
[코딩애플] js part 3-10. Web Components: 커스텀 HTML 태그 만들기  (0) 2022.10.22
[코딩애플] js part 3-9. Map, Set 자료형  (0) 2022.10.21
[코딩애플] js part 3-8. Symbol 자료형  (0) 2022.10.21

'Front-End: Web/JavaScript' Related Articles

티스토리툴바