재사용 가능한 화신 웹 구성 요소 만들기

이 화신 구성 요소는 웹 구성 요소가 될 것이다.이것은 신기술로 작년에 더 많은 브라우저 지원을 받은 것 같다.이것은 대형 조직이나 웅대한 프로젝트의 중용성 문제를 해결하기 위한 것이다. 개발자가 모든 JS 프레임워크와 호환되는 구성 요소를 사용하도록 하는 것이다.원래 JavaScript인 경우가 많습니다.이것은 모든 프레임워크에 구성 요소 라이브러리가 필요하지 않다는 것을 의미합니다. 예를 들어 React, Angular, Vue, Svelte 등은 단독 라이브러리가 없습니다. 웹 구성 요소만 사용하면 됩니다.이것은 웹 구성 요소를 구성 요소 라이브러리에 매우 적합하게 한다.
구성 요소를 만들어 봅시다.우리는 이 블로그 글 (https://marcoslooten.com/blog/creating-avatars-with-colors-using-the-modulus/) 에서 만든 화신 구성 요소를 다시 만들고 웹 구성 요소로 변환할 것입니다.다음과 같은 메시지가 표시됩니다.

새 웹 구성 요소 만들기

웹 구성 요소에 사용되는 프레임워크가 있지만, 우리는 vanilla JavaScript만 사용하여 프레임워크를 구축할 것입니다.너는 그것을 아바타로 명명하고 싶을지도 모르지만, 이것은 사실상 무효한 명칭이다.원본 HTML 요소와 더 잘 분리하기 위해서는 웹 구성 요소에 대시가 포함되어야 합니다.HTML 요소에 대시가 포함되어 있지 않으므로 대시를 웹 구성 요소의 시각적 단서로 간주할 수 있습니다.우리는 사용자 정의 화신이라고 부른다.계속!
먼저 "CustomAvatar"라는 클래스를 만듭니다. 이 클래스는 HTMLElement를 확장합니다.HTMLElement와 함께 제공되는 다양한 기능에 액세스하려면 확장이 필요합니다.수업이 끝난 후, 우리는 브라우저에 특정한 이름 ("custom-avatar") 과 특정한 클래스 ("CustomAvatar") 를 가진 새로운 사용자 정의 요소가 있음을 알려야 한다.

class CustomAvatar extends HTMLElement {}
window.customElements.define('custom-avatar', CustomAvatar);

클래스 이름(Custom Avatar)은 우리가 원하는 모든 이름일 수 있지만, 사용자 정의 요소와 같은 이름을 사용하지만,kebab cased가 아닌 Pascal Case를 사용합니다.이제 태그를 HTML: <custom-avatar></custom-avatar>에 추가할 수 있습니다.아직 볼 게 없어요.화신처럼 보이게 하자!

웹 구성 요소에 HTML 및 CSS 추가

CustomAvatar 클래스에서는 구조 함수를 사용합니다.이 방법은 구성 요소를 초기화할 때 호출되며 태그와 스타일 설정에 사용할 수 있습니다.또한 Super () 를 호출합니다. HTML Element에서 모든 방법과 속성을 상속해야 합니다.

class CustomAvatar extends HTMLElement {
  constructor() {
    super();
  }
}
window.customElements.define('custom-avatar', CustomAvatar);

이제 그림자 DOM을 사용합니다.이것은 웹 구성 요소의 봉인 부분입니다. 웹 구성 요소 자체만 변경할 수 있습니다.이것은 웹 구성 요소가 주변 환경의 영향을 받지 않는다는 것을 의미합니다.내 웹 구성 요소에 h1 표시가 있고 일반적인 스타일 <style>h1 { background: hotpink}</style>을 사용한다고 가정하십시오.페이지 주위에 스타일이 있는 h1이 있어도 웹 구성 요소의 h1에 영향을 주지 않습니다.
이제 재미있는 일이 시작되었습니다. 우리는 표식을 그림자 DOM에 추가할 수 있습니다.나는 각 단계의 작용을 설명하기 위해 약간의 주석을 추가했다.

class CustomAvatar extends HTMLElement {
  constructor() {
    super();

    // Enable the shadow DOM for this component
    this.attachShadow({ mode: 'open' });

    // Create a HTML template (this is a special tag which can hold markup)
    const template = document.createElement('template');

    // Set the innerHTML to the actual markup we want
    template.innerHTML = `<div class="avatar"></div>`;

    // Create a style element
    const styles = document.createElement('style');

    // Inside the style element, add all the CSS
    styles.textContent = `
    .avatar {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: hotpink;
      border-radius: 50%;
      font-family: sans-serif;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
    }
    `;

    // Append the style element to the shadow DOM
    // shadowRoot is the wrapper of our component
    this.shadowRoot.appendChild(styles);

    // Take the template contents, and copy them to the shadow DOM
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

지금 너는 페이지에서 분홍색 동그라미를 보아야 한다.우리는 진전이 있다!

사용자 데이터 전송을 위한 속성 추가

props나 @Input () 또는 React나 Angular 같은 프레임워크를 사용하는 것이 아니라 일반적인 HTML 속성을 사용하여 구성 요소에 데이터를 전달합니다.우리는 알파벳만 있으면 이렇게 화신을 사용할 수 있다. <custom-avatar initials="MJ"></custom-avatar>.이렇게 하면 this.getAttribute('initials')과 같은 JavaScript 액세스 속성을 사용할 수 있습니다.일부 웹 구성 요소 예시에서 구조 함수의 속성을 검색할 수 있지만, 이것은 나쁜 방법입니다. (여기 규범: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance 참조)connectedCallback에서 이 동작을 실행하는 것이 좋습니다. 구성 요소를 불러올 때 호출합니다.
더 좋은 것은 attributesChangedCallback이다.속성을 업데이트할 때마다 이 방법을 호출합니다.다행히도, 구성 요소가 처음 불러올 때, 그것들도 변화할 것이다.속성의 초기 값은 null입니다. 준비가 되면 속성을 제공하는 값으로 설정합니다.attributesChangedCallback은name,oldValue,newValue 세 가지 인자를 받아들입니다.너무 잘 어울려요!이것은 초기 값을 얻기에 좋은 곳일 뿐만 아니라, 값이 변하면, 다시 실행될 수도 있다. (우리의 화신을 위해 새로운 색을 가져와야 한다.)구조 함수 외에 다음 코드를 추가합니다.

// This is our code to generate a color code from a string
// For more info, see the blog about this technique:
// https://marcoslooten.com/blog/creating-avatars-with-colors-using-the-modulus/

getColorFromText(text) {
  const colors = ['#00AA55', '#009FD4', '#B381B3', '#939393', '#E3BC00', '#D47500', '#DC2A2A'];
  const charCodes = text
    .split('')
    .map(char => char.charCodeAt(0))
    .join('');
  return colors[parseInt(charCodes, 10) % colors.length];
}

// This static get is needed to tell our component which attributes to watch
// If you don't provide this, it won't work
static get observedAttributes() {
  return ['initials'];
}

// This will run only when our 'initials' attribute changes
attributeChangedCallback(name, oldValue, newValue) {
  // But for future-proofing, I'd like to check anyway
  if(name === 'initials') {
    // Get the avatar div from the shadow DOM:
      const avatar = this.shadowRoot.querySelector('.avatar');
        // Set the text to the attribute value:
      avatar.innerText = newValue;
        // And set the background color to the color from the getColorFromText method
      avatar.style.backgroundColor = this.getColorFromText(newValue);
  }
}

웹 구성 요소 만들기

이제 당신은 간단한 웹 구성 요소를 만드는 방법을 알고 있습니다!우리는 먼저 HTML Element를 확장하는 클래스를 만들고 DOM에 사용자 정의 요소가 있음을 알려 줍니다.그런 다음 구조 함수에서 기본 태그와 반환 배경색을 사용하여 어셈블리를 초기화합니다.우리가 사용하는 DOM 방법은 이미 오랫동안 존재해 왔으니 당신은 이미 익숙해졌을 것입니다.마지막으로 웹 구성 요소의 내장 생명주기 방법 중 하나를 사용했습니다. 이 예에서attributeChangedCallback은 우리의 속성을 설정하거나 업데이트할 때 터치합니다.
웹 구성 요소를 연구할 때, 나는 그것이 얼마나 간단한지 놀랐다.전체 프레임워크에 비해 상대적으로 작은 API일 뿐, Angular나 React보다 더 빨리 학습할 수 있습니다.그러나 만약 당신이 막 시작한다면 문법이 좀 서투르다고 느낄 수 있습니다.또한 DOM 작업(query Selector,create Element,inner HTML,inner Text 등)에 능통하면 웹 구성 요소를 작성하기 시작하면 이런 작업이 많기 때문에 정말 도움이 됩니다.
마지막으로, 그것은 아마도 매우 배울 만한 가치가 있을 것이다.나는 몇몇 대기업들이 갈수록 이 기술을 채택하는 것을 보았다.어떤 프레임워크를 사용하든지 간에 그들은 팀 간에 구성 요소를 공유할 수 있다.많은 사람들에게 이것은 거대한 승리이다.같은 구성 요소를 사용해야 하지만 다른 프레임워크로 세 개의 구성 요소 라이브러리를 업데이트해야 한다고 상상해 보세요.
웹 구성 요소에 대한 정보를 더 알고 싶으면 다음 자원을 보십시오.
The Ultimate Guide to Web Components
Lifecycle Hooks in Web Components
webcomponents.org