Creates an object with a getter for properties, allowing for the dynamic creation of properties.

PePe.js

import { html, LitElement } from 'lit';
import { styles } from './styles/pe-pe-styles.css.js';

// https://github.com/KonnorRogers/form-associated-helpers/blob/main/exports/mixins/lit-form-associated-mixin.js

/**
 * Creates an object with a getter for properties, allowing for the dynamic creation of properties.
 * @param {Object} props - The properties to be included in the object.
 * @returns {Object} An object with a `properties` getter that returns a new objec.
 */
const createPros = props => ({
  get properties() {
    return { ...props };
  },
});

const formProps = createPros({
  role: { reflect: true },
  name: { reflect: true },
  type: { reflect: true },
  /**
   * Don't reflect "disabled". It breaks the `formDisabledCallback` on formAssociated elements when used with `<fieldset disabled>`.
   *   https://github.com/whatwg/html/issues/8365
   */
  disabled: { type: Boolean },
  required: { reflect: true, type: Boolean },
  hasInteracted: { attribute: false, type: Boolean, state: true },
  formControl: { attribute: false, state: true },
  defaultValue: { attribute: 'value', reflect: true },
  valueHasChanged: { type: Boolean, attribute: false, state: true },
  value: { attribute: false, state: true },
});

/**
 * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
 *
 * ## `<pe-pe>`
 * An example element.
 *
 * @attribute heading
 * @attribute counter
 * @fires counterchange - Indicates when the count changes
 * @slot - This element has a slot
 */
export class PePe extends LitElement {
  /**
   * @override
   */
  static styles = [styles];

  /**
   * @override
   */
  static properties = {
    ...formProps.properties,
    /**
     * The heading to say "Hello" to.
     */
    heading: { type: String },

    /**
     * The number of times the button has been clicked.
     */
    counter: { type: Number },
  };

  constructor() {
    super();
    this.heading = 'Hey there';
    this.counter = 5;
  }

  /**
   * @override
   */
  render() {
    return html`
      <h1>${this.sayHello(this.heading)}!</h1>
      <button @click=${this.#onClick}>Counter: ${this.counter}</button>
      <hr />
      <slot></slot>
    `;
  }

  #onClick() {
    this.counter += 1;
    this.dispatchEvent(new CustomEvent('counterchange', { detail: this.counter }));
  }

  /**
   * Formats a greeting
   * @param heading {string} The heading to say "Hello" to
   * @returns {string} A greeting directed at `heading`
   */
  sayHello(heading) {
    return `Hello, ${heading}`;
  }
}