Window.customElements

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2020å¹´1æâ©.

customElements æ¯ Window å¯¹è±¡ä¸çä¸ä¸ªåªè¯»å±æ§ï¼æ¥å£è¿åä¸ä¸ª CustomElementRegistry å¯¹è±¡çå¼ç¨ï¼å¯ç¨äºæ³¨åæ°ç custom elementï¼æèè·åä¹åå®ä¹è¿çèªå®ä¹åç´ çä¿¡æ¯ã

ä¾å

let customElementRegistry = window.customElements;
customElementRegistry.define("my-custom-element", MyCustomElement);

However, it is usually shortened to something like the following:

customElements.define(
  "element-details",
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById(
        "element-details-template",
      ).content;
      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        template.cloneNode(true),
      );
    }
  },
);

åéæä»¬ç web-components-examples è·åæ´å¤æç¨çä¾åã