@haxtheweb/create/dist/templates/generic/sitecomponent.js

CLI for all things HAX the web

/**
 * Copyright <%= year %> <%= author %>
 * @license Apache-2.0, see LICENSE for full text.
 */
import { LitElement, html, css } from "lit";
import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js";

/**
 * `<%= name %>`
 * 
 * @demo index.html
 * @element <%= name %>
 */
export class <%= className %> extends DDDSuper(LitElement) {

  static get tag() {
    return "<%= name %>";
  }

  constructor() {
    super();
    this.title = "";
  }

  // Lit reactive properties
  static get properties() {
    return {
      ...super.properties,
      title: { type: String },
    };
  }

  // Lit scoped styles
  static get styles() {
    return [super.styles,
    css`
      :host {
        display: block;
        color: var(--ddd-theme-primary);
        background-color: var(--ddd-theme-accent);
        font-family: var(--ddd-font-navigation);
      }
      .wrapper {
        margin: var(--ddd-spacing-2);
        padding: var(--ddd-spacing-4);
      }
      h3 span {
        font-size: var(--<%= name %>-label-font-size, var(--ddd-font-size-s));
      }
    `];
  }

  // Lit render the HTML
  render() {
    return html`
<div class="wrapper">
  <h3>${this.title}</h3>
  <slot></slot>
</div>`;
  }

}

globalThis.customElements.define(<%= className %>.tag, <%= className %>);