<my-element></my-element>

::part(button) {
  background: linear-gradient(45deg, rgb(55 245 220) 0%, rgb(50 255 160) 100%);
  color: rgb(45 80 60);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  appearance: none;
}

::part(button):hover {
  filter: hue-rotate(5deg) brightness(110%);
}

// Docs: https://minze.dev

(class MyElement extends MinzeElement {
  reactive = [['count', 0]]
  
  increaseCount = () => this.count++
  
  html = () => `
    <div>Current count: ${this.count}</div>
    <button part="button">Click Me</button>
  `
  
  css = () => `
    :host {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      font-family: Arial, 'sans-serif';
      padding: 1rem;
    }
  `
  
  eventListeners = [['button', 'click', this.increaseCount]]
}).define()