How to use the lit/decorators.js.customElement function in lit

To help you get started, we’ve selected a few lit examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dodona-edu / dodona / app / javascript / components / MetricLabel1.ts View on Github external
import { html, css, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("metric-label-1")
export class MetricLabel1 extends LitElement {
    @property({ type: Number })
    number: number;

    @property()
    label = "Somebody";

    // don't use shadow dom
    createRenderRoot(): Element {
        return this;
    }

    render(): unknown {
        return html`
          <h1>${this.number}</h1>
          ${this.label}`;
github dodona-edu / dodona / app / javascript / components / SimpleGreeting.ts View on Github external
import { html, css, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("simple-greeting")
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = "Somebody";

  render() {
      return html`<p>Hello, ${this.name}!</p>`;
  }
}

lit

A library for building fast, lightweight web components

BSD-3-Clause
Latest version published 2 months ago

Package Health Score

95 / 100
Full package analysis

Popular lit functions