코드 땜장이

글

라벨이 custom element인 게시물 표시

Shadow DOM (웹 컴포넌트 캡슐화)

우리는 지난 시간 customElement를 생성하는 방법을 확인하였다. 하지만 지금까지 포스팅한 내용만 가지고는 웹 컴포넌트을 만들기에는 역부족 일 것이다. 가장 첫번째 문제로 직면할 내용이 위처럼 외부 css 정의 역시 내부 엘리먼트에 영향을 끼친다는 것이다. 이는 css를 작성함에 있어서 커스텀 엘리먼트의 하위 속성인지 전부 확인하며 피해서 css정의를 해야 한다는 게 큰 문제이다. => 이는 당연하게도 document . getElementsByTagName ( 'div' ) 와 같은 dom을 셀렉트하는 과정에서도 영향을 받는다. 이 내용은 컴포넌트를 만드는데에 있어서 큰 문제이다. 웹 컴포넌트를 만드는 입장에서도 외부에서 절대로 사용 안 할 만한 class, name, id등을 정의 하여야 한다. DOM tree 브라우저는 우리가 작성한 html tag들을 가지고 DOM tree를 생성한다. 예시는 아래와 같다. <html> <head></head> <body> <div> div 1 </div> <div> div 2 <div> div 2 - 1 </div><div> div 2 - 2 </div><div> div 2 - 3 </div></div> </body> </html> 위와 같이 우리가 작성한 html은 위와 같이 브라우저가 해석하여 DOM tree를 만들고 해당 tree를 근거로 자식 노드들, 부모 노드, 형제들을 판단한다. TreeWalker . parentNode () TreeWalker . firstChild () TreeWalker . lastChild () TreeWalker . previousSibling () TreeWalker . nextSibling () Tr...

CustomElement (2)

전 시간에 CustomElement를 만드는 방법에 대해서 확인해보았다. 이번 시간부터는 조금더 상세하게 확인해보도록 하자. 정의요소 class MyElement extends HTMLElement { constructor () { super () // element 생성 } connectedCallback () { // document 에 element 가 추가 되면 브라우저에서 호출이 된다 . } disconnectedCallback () { // document 에 element 가 제거 되면 브라우저에서 호출이 된다 . } static get observedAttributes () { return [ /* 모니터링 될 속성의 이름 . */ ] } attributeChangedCallback (name , oldValue , newValue) { // observedAttributes 에서 나열되어있는 속성중 하나의 속성이라도 값이 변경되면 호출 된다 . } adoptedCallback () { // 해당 엘리먼트라 다른 document 로 이동될 시 호출 된다 . } } customElement를 정의하게 되면 위의 메서드들을 정의할 수 있다. 각각의 메서드들 중 constructer를 제외 하고는 처음 보는 것들일 것이다. 각각의 속성에 대해서 설명을 해보겠다. constucter 당연 하게도, new MyElement()를 호출하게 되면 constructer가 호출되는 것은 당연하게 여길 것이다. 그 외에 엘리먼트로써 생성되는 경우가 두가지가 있다. html 본문에 태그로 작성 되어있는 경우 customElements.define이 되어있다면, 해당 태그가 해석 될 때 constructer가 호출 되고, customElements.define가 태그 해석이 완료 후에 호출된다면, define이 되었을 때 호출이 ...

CustomElement

프런트엔드 개발자라면 프레임워크등을 사용하여 컴포넌트를 만드는 것은 익숙 할 것이다. 뭐 물론 백엔드 개발자라고 하더라도, custom tag를 정의 해 본 사람도 있을 것이다. 오늘은 프레임 워크없이 우리가 컴포넌트라고 부를수 있을 만한 custom element를 정의를 해볼 것이다. Window.customElements window의 기본객체에는 위와 같은 객체가 있다. 이름만 보더라도 아 새로운 element를 등록하기 위해서 만들어진 것이구나 생각 할 수 있을 것이다. 그러면 지원하는 함수들을 한번 확인해보자. define, get, upgrade, whenDefined define: 우리가 이번 포스트에서 주로 살펴볼 함수이다. 커스텀 엘리먼트를 정의 하는 함수라고 볼수 있다. * document.registerElement와 유사한 행위를 하지만 document.registerElement는 deprecated이니 사용 하지 말자. get: 특정이름으로 정의 된 커스텀 엘리먼트의 클래스를 반환한다. upgrade: 특정 dom의 트리를 정의한 커스텀 엘리먼트로 업그레이드 한게 된다. whenDefined: 특정이름의 컴포넌트가 정의 될때 알 수 있도록 promise를 제공한다. => 이는 미리 html을 로드후 정의 되지 않은 엘리먼트를 특정 시점에 upgrade를 하거나 대치 할 수 있도록 정의 필요 할 것으로 보인다. Window.customElements.define window의 기본객체에는 위와 같은 객체가 있다. 이름만 보더라도 아 새로운 element를 등록하기 위해서 만들어진 것이구나 생각 할 수 있을 것이다. 그러면 지원하는 함수들을 한번 확인해보자. 커스텀 엘리먼트를 정의 하는 것은 어렵지 않다. <html> <head> <script> class TestElement ...