@pluginarch/create-parch/templates/material/src/index.js

this is way to create a ui project

class Test 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></slot> <!-- 这里可以插入内容 -->
      `;
   
      // 将模板内容添加到Shadow DOM
      this.shadow.appendChild(template.content.cloneNode(true));
    }
  }
   
  // 定义该组件的标签名
  customElements.define('pe-test', Test);