Web component generator template files

element.js

import { ApplicationElement, html } from '@effectivastudio/lit-components';

import translations from './translations.js';
import style from './style.lit.css';

/**
 * TODO: Description
 *
 * @prop exampleProp - TODO: description
 *
 * @slot default - TODO: description
 * @slot namedSlot - TODO: description
 */

export default class GalleryItem extends ApplicationElement {
  static styles = [ApplicationElement.styles, style];

  static properties = {
    exampleProp: { type: String },
  };

  constructor() {
    super();
    // this.exampleProp = 0;
  }

  /** @internal */
  static translations = translations;

  render() {
    return html`Hello from xs-gallery-item component!`;
  }
}

GalleryItem.registerTagName('xs-gallery-item');

customElements.get('xs-gallery-item') ||
  customElements.define('xs-gallery-item', GalleryItem);

gallery_item.stories.js

import webComponentAutoConfig from "../../.storybook/web_component_helpers.js";

import "./element.js";

const config = webComponentAutoConfig("xs-gallery-item");

export default {
  title: "Generated/GalleryItem",
  ...config,
  parameters: {
    // layout: "padded",
  },
};

export const ADemo = {
  args: {
    exampleProp: 'Hello',
  },
};

spec.js

import { fixture, assert, html } from "@open-wc/testing";

import GalleryItem from "./element.js";

describe("xs-gallery-item", () => {
  it("initialize", async () => {
    const element = await fixture(html`<xs-gallery-item></xs-gallery-item>`);

    assert.instanceOf(element, GalleryItem);
  });

  it("default render", async () => {
    const element = await fixture(html`<xs-gallery-item></xs-gallery-item>`);

    assert.shadowDom.equal(
      element,
      `
        Hello from xs-gallery-item component!
      `
    );
  });
});

style.lit.css

:host {
  display: block;
}

translations.js

export default {
  en: {
    exampleProp: 'Example prop'
  }
};