如何在webcomponents中封装父子关系？

// 父组件
class ParentComponent extends HTMLElement {
  constructor() {
    super();
    // 定义需要传递给子组件的属性
    this.message = 'Hello World!';
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = `
      <div>
        <h1>Parent Component</h1>
        <child-component message="${this.message}"></child-component>
      </div>
    `;
  }
}
customElements.define('parent-component', ParentComponent);

// 子组件
class ChildComponent extends HTMLElement {
  static get observedAttributes() {
    return ['message'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      this.render();
    }
  }

  render() {
    this.shadowRoot.innerHTML = `
      <div>
        <h2>Child Component</h2>
        <p>${this.getAttribute('message')}</p>
      </div>
    `;
  }
}
customElements.define('child-component', ChildComponent);