Web Components(custom element + shadow DOM)란 무엇인가요?

class UserCard extends HTMLElement {
  connectedCallback() {            // 라이프사이클: 페이지에 추가될 때 실행된다
    const shadow = this.attachShadow({ mode: "open" }); // shadow DOM 생성
    shadow.innerHTML = `
      <style> h2 { color: blue; } </style>
      <h2>${this.getAttribute("name")}</h2>
      <slot></slot>
    `;
  }
}
customElements.define("user-card", UserCard); // 이름에 반드시 하이픈이 있어야 한다

<user-card name="Ann">Extra content goes in the slot</user-card>

/* 페이지 CSS */ h2 { color: red; } /* user-card 안의 <h2>에 영향을 주지 않는다 */

connectedCallback()    // DOM에 추가됨
disconnectedCallback() // DOM에서 제거됨 (정리)
attributeChangedCallback(name, old, val) // 관찰 중인 attribute가 변경됨
static get observedAttributes() { return ["name"]; }