맞춤 요소

11026 단어 htmlcustomelementsjavascript

소개



웹 구성 요소의 하위 집합인 사용자 지정 요소는 제 생각에 웹을 방문하는 가장 멋진 것 중 하나입니다. 효과적으로 이를 통해 React, Angular, Vue 등과 같은 중간 라이브러리나 프레임워크를 사용하는 대신 웹 플랫폼 고유의 구성 요소를 구축할 수 있습니다.

이 게시물에서는 사용자 정의 요소가 무엇인지, 어떻게 구성되고 페이지에 배치하는 방법을 보여드리고자 합니다.

웹 컴포넌트의 기초



모든 맞춤 요소는 몇 가지 일반적인 방법을 공유하며, 그 예는 아래 코드 예에서 볼 수 있습니다.

class MyComponent extends HTMLElement {
  static get observedAttributes() {
    return [];
  }

  constructor(...args) {
    super(...args);
  }

  connectedCallback() {}

  disconnectedCallback() {}

  adoptedCallback() {}

  attributeChangedCallback(attrName, oldVal, newVal) {}
}

window.customElements.define('my-component', MyComponent);

여기서 실제로 일어나는 일을 분석해 보겠습니다.

건설자()



A constructor must always be ideally declared and any parameters passed to the parent also.



생성자는 항상 이상적으로 이벤트 리스너 등이 일반적으로 구현되는 위치에 있습니다. 예를 들면 다음과 같습니다.

...
constructor(...args) {
    super(...args);
    this.addEventListener('click', this.handleClick);
}

handleClick(event) {}
...

커넥티드콜백()



Called every time the element is inserted into the DOM.



구성 요소가 페이지의 아무 곳에나 추가될 때마다 언제든지 이 기능을 실행합니다.

연결 끊김콜백()



Called every time the element is removed from the DOM.



예를 들어 DOM 트리에서 노드 또는 부모 노드를 삭제하면 본질적으로 앞서 언급한 트리에서 요소를 제거하므로 이 함수가 실행됩니다.
disconnectedCallback()는 문서의 다른 곳이나 새 페이지에서 요소가 채택된 ​​경우에도 실행됩니다.

채택콜백()



Invoked each time the custom element is moved to a new document.



맞춤 요소가 새 페이지나 문서로 이동되면 이 콜백이 실행됩니다.

attributeChangedCallback(attrName, oldVal, newVal)



The behaviour occurs when an attribute of the element is added, removed, updated, or replaced.



이 함수는 변경된 속성이 현재 관찰되고 있는 경우에만 구성 요소의 속성이 변경될 때마다 실행되며, 이는 observedAttributes() 로 이어집니다.

관찰된 속성()



Attributes of the custom element we actually want to observe changes upon



보시다시피 이 메서드는 static get observedAttributes()로 선언되며 다른 메서드 선언과 분명히 다릅니다. 이는 모든 하위 클래스/구성 요소에서 상속받기를 원하고 한 번만 참조하도록 선언하기 때문입니다. static (모든 상속자와 자신에 대해 설정) 및 get 테이블(참조용).

이 함수는 각 문자열이 관찰하려는 속성의 이름인 문자열 배열을 반환해야 합니다. 예를 들면 다음과 같습니다.

...
static get observedAttributes() {
    return ['id', 'my-custom-attribute', 'data-something', 'disabled'];
}
...

맞춤 요소 사양에는 몇 가지 다른 기능이 있지만 이러한 기능은 우리가 매일 주로 사용하는 기능입니다.

기본 구성 요소



사용자에게 인사하는 기본 구성 요소를 빌드해 보겠습니다.

HTML



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Custom Elements 101</title>
</head>
<body>
  <hello-component data-name="James"></hello-component>
  <script src="./hello-component.js"></script>
</body>
</html>

자바스크립트



class HelloComponent extends HTMLElement {
  static get observedAttributes() {
    return ['data-name'];
  }

  // custom methods
  render() {
    this.innerHTML = `Hello ${this.name}`;
  }

  get name() {
    return this.getAttribute('data-name');
  }

  // lifecycle hooks
  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    this.render();
  }
}

// add into the 'real' dom as a valid tag
window.customElements.define('hello-component', HelloComponent);

index.html을 로드하면 페이지에 "Hello James"가 표시되어야 합니다.

이제 인스펙터(DevTools)를 열고 data-name 속성을 James가 아닌 다른 속성으로 변경합니다. 반응성이 내장되어 있음을 알 수 있습니다! 꽤 달콤하죠?

물론 이것은 매우 기본적이고 모범 사례가 아니며 사용 사례가 없고 기본 자습서 구현이지만 향후 기사에서 빌드할 수 있는 대략적인 소개를 제공합니다.

브라우저 지원



다음은 웹 구성 요소에 대한 현재 지원과 Shadow DOM, 사용자 정의 요소(방금 살펴본 것), HTML 템플릿 및 슬롯, HTML 가져오기를 포함하여 웹 구성 요소를 용이하게 하는 모든 API입니다.



결론



사용자 정의 요소를 사용하면 필요할 때 프레임워크 없이 반응형 UI를 구현할 수 있습니다. 그것들은 우리에게 많은 도전 과제를 제공하며 그 중 많은 부분을 앞으로 살펴볼 것입니다. 아주 적은 양으로 많은 일을 할 수 있는 반응형 요소.

자원


  • Web Components - MDN
  • Custom Elements - MDN
  • Shadow DOM - MDN
  • HTML Templates and Slots - MDN
    • js 텍스트 복사(IE, 화성 호환)
    checkAll 모두 선택한 작은 예

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage