如何通过JavaScript的CustomElementRegistry定义自定义元素，以及它在组件化开发中的生命周期管理？

customElements.define()

my-element

HTMLElement

class MyElement extends HTMLElement {
  constructor() {
    super(); // 必须调用super()
    this.attachShadow({ mode: 'open' }); // 创建一个shadow DOM
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: block; }
        .container { border: 1px solid black; padding: 10px; }
      </style>
      <div class="container">
        <h1>Hello from MyElement!</h1>
        <slot></slot>
      </div>
    `;
  }

  connectedCallback() {
    console.log('MyElement connected to the DOM');
  }

  disconnectedCallback() {
    console.log('MyElement disconnected from the DOM');
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
  }

  static get observedAttributes() {
    return ['data-message']; // 监听 data-message 属性的变化
  }
}

customElements.define('my-element', MyElement);

my-element

constructor

connectedCallback

disconnectedCallback

attributeChangedCallback

observedAttributes

<my-element>

<my-element data-message="Hello"></my-element>

this.attachShadow({ mode: 'open' })

mode: 'open'

mode: 'closed'

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          --main-color: blue; /* 定义一个CSS自定义属性 */
        }
        .container {
          border: 1px solid var(--main-color); /* 使用CSS自定义属性 */
          padding: 10px;
        }
      </style>
      <div class="container">
        <h1>Hello from MyElement!</h1>
        <slot></slot>
      </div>
    `;
  }
}

--main-color

my-element

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        button {
          background-color: lightblue;
          padding: 10px 20px;
          border: none;
          cursor: pointer;
        }
      </style>
      <button>Click me!</button>
    `;

    this.button = this.shadowRoot.querySelector('button');
    this.button.addEventListener('click', this.handleClick.bind(this));
  }

  handleClick() {
    alert('Button clicked!');
  }
}

customElements.define('my-button', MyButton);

constructor

this.handleClick.bind(this)

handleClick

this

MyButton

// Parent element
class ParentElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <child-element></child-element>
    `;

    this.child = this.shadowRoot.querySelector('child-element');
    this.child.addEventListener('message-sent', this.handleMessage.bind(this));
  }

  handleMessage(event) {
    console.log('Message received from child:', event.detail.message);
  }
}

customElements.define('parent-element', ParentElement);

// Child element
class ChildElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button>Send message</button>
    `;

    this.button = this.shadowRoot.querySelector('button');
    this.button.addEventListener('click', this.sendMessage.bind(this));
  }

  sendMessage() {
    const event = new CustomEvent('message-sent', {
      detail: {
        message: 'Hello from child!'
      },
      bubbles: true, // 允许事件冒泡
      composed: true // 允许事件穿透shadow DOM
    });

    this.dispatchEvent(event);
  }
}

customElements.define('child-element', ChildElement);

ChildElement

message-sent

ParentElement

bubbles: true

composed: true

// my-element.test.js
import { MyElement } from './my-element.js'; // 假设 my-element.js 中导出了 MyElement 类

describe('MyElement', () => {
  it('should render the correct text', () => {
    const element = document.createElement('my-element');
    document.body.appendChild(element);

    // 等待 connectedCallback 执行
    return new Promise(resolve => setTimeout(() => {
      const h1 = element.shadowRoot.querySelector('h1');
      expect(h1.textContent).toBe('Hello from MyElement!');
      resolve();
    }, 0));
  });
});

my-element

connectedCallback

setTimeout

@open-wc/testing

CustomElementRegistry