https://github.com/aelbore/lit-custom-element

Lightweight library for building native web components
https://github.com/aelbore/lit-custom-element

custom-elements javascript library lightweight lit-html native webcomponents

Last synced: 5 months ago
JSON representation

Lightweight library for building native web components

• Host: GitHub
• URL: https://github.com/aelbore/lit-custom-element
• Owner: aelbore
• Created: 2019-02-07T06:29:12.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T16:44:07.000Z (over 3 years ago)
• Last Synced: 2025-06-06T13:02:53.133Z (about 1 year ago)
• Topics: custom-elements, javascript, library, lightweight, lit-html, native, webcomponents
• Language: TypeScript
• Homepage:
• Size: 1.02 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![Coverage Status](https://coveralls.io/repos/github/aelbore/lit-custom-element/badge.svg?branch=master&service=github)](https://coveralls.io/github/aelbore/lit-custom-element?branch=master)

[![Build Status](https://travis-ci.com/aelbore/lit-custom-element.svg?branch=master)](https://travis-ci.com/aelbore/lit-custom-element)

[![npm version](https://badge.fury.io/js/lit-custom-element.svg)](https://www.npmjs.com/package/lit-custom-element)

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

# lit-custom-element

Lightweight library for building native web components

Installation

------------

  ```

    npm install lit-custom-element

  ```

```javascript

  import { LitCustomElement, html } from 'lit-custom-element'

  class HelloWorld extends LitCustomElement {

    get message() {

      return this._message

    }

    set message(value) {

      this._message = value

      this.onPropertyChanged('message', true)

    }

    static get styles() {

      return `

        h1 { 

          color: red;

        }

      `

    }

    render() {

      return html `
Hello ${this.message}!
`

    }


  }

  customElements.define('hello-world', HelloWorld)

```