@pluginarch/create-parch/templates/app/src/pages/HomePage.mjs

this is way to create a ui project

// const HTMLElement = globalThis.HTMLElement || class {};
// const customElements = globalThis.customElements || class {
//   static define=(a,b)=>{}
// };
class HomePage extends BaseElement {
  constructor() {
    super(); // 调用父类构造函数
 
    // 创建Shadow DOM
    // const shadow = this.attachShadow({ mode: 'open' });
 
    // 创建组件的模板
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
          font-family: 'Arial', sans-serif;
        }
      </style>
      <slot>
        <p>Hello, 这里是首页!</p>
      </slot> <!-- 这里可以插入内容 -->
    `;
 
    // 将模板内容添加到Shadow DOM
    this.shadow.appendChild(template.content.cloneNode(true));
  }
}
 
// 定义该组件的标签名
customElements.define('pe-homepage', HomePage);