如何在自定义元素继承中覆盖部分<template>元素？

<!-- 父类模板 -->
<template id="parent-template">
  <style>
    p { color: blue; }
  </style>
  <p>这是父类的内容</p>
</template>

<!-- 子类模板 -->
<template id="child-template">
  <style>
    p { color: red; }
  </style>
  <p>这是子类覆盖的内容</p>
</template>

<script>
  // 定义父类
  class ParentElement extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('parent-template').content;
      this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));
    }
  }

  // 定义子类
  class ChildElement extends ParentElement {
    constructor() {
      super();
      // 覆盖父类的模板
      const childTemplate = document.getElementById('child-template').content;
      this.shadowRoot.innerHTML = ''; // 清空父类模板
      this.shadowRoot.appendChild(childTemplate.cloneNode(true));
    }
  }

  // 注册自定义元素
  customElements.define('parent-element', ParentElement);
  customElements.define('child-element', ChildElement);
</script>

<!-- 使用自定义元素 -->
<parent-element></parent-element>
<child-element></child-element>