Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/motss/try-lit-element
Try lit-element
https://github.com/motss/try-lit-element
Last synced: 27 days ago
JSON representation
Try lit-element
- Host: GitHub
- URL: https://github.com/motss/try-lit-element
- Owner: motss
- License: mit
- Created: 2018-02-04T12:24:32.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-12T16:42:59.000Z (almost 6 years ago)
- Last Synced: 2024-10-24T08:25:31.586Z (2 months ago)
- Language: TypeScript
- Size: 146 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
try-lit-element
A simple custom element written in [TypeScript][typescript-url] with LitElement
[![Version][version-badge]][version-url]
[![Built with lit-element][built-with-lit-element-badge]][built-with-lit-element-url]
[![MIT License][mit-license-badge]][mit-license-url]
[![Downloads][downloads-badge]][downloads-url]
[![Total downloads][total-downloads-badge]][downloads-url]
[![Packagephobia][packagephobia-badge]][packagephobia-url]
[![Bundlephobia][bundlephobia-badge]][bundlephobia-url]
[![Build Status][travis-badge]][travis-url]
[![Dependency Status][daviddm-badge]][daviddm-url]
[![codebeat badge][codebeat-badge]][codebeat-url]
[![Codacy Badge][codacy-badge]][codacy-url]
[![Code of Conduct][coc-badge]][coc-url]
> Better element for the web
## Table of contents
- [Table of contents](#table-of-contents)
- [Pre-requisites](#pre-requisites)
- [Installation](#installation)
- [Usage](#usage)
- [HTML (w/ native ES modules)](#html-w-native-es-modules)
- [JS/ TS file (w/ native ES modules)](#js-ts-file-w-native-es-modules)
- [License](#license)
## Pre-requisites
- [Java 8][java-url] _(`web-component-tester` works without any issue with Java 8)_
- [Node.js][nodejs-url] >= 10.15.1
- [NPM][npm-url] >= 6.4.1 ([NPM][npm-url] comes with [Node.js][nodejs-url], no separate installation is required.)
- (Optional for non-[VS Code][vscode-url] users) [Syntax Highlighting for lit-html in VS Code][vscode-lit-html-url]
## Installation
```sh
# Install via NPM
$ npm install try-lit-element
```
## Usage
### HTML (with native ES modules)
```html
```
### JS/ TS file (w/ native ES modules)
```ts
import { css, html, LitElement } from 'lit-element';
import 'try-lit-element.js';
class MainApp extends LitElement {
public static styles = [
css`
:host {
display: block;
}
* {
box-sizing: border-box;
}
`,
];
protected render() {
return html`
`;
}
}
```
## License
[MIT License](https://motss.mit-license.org/) © Rong Sen Ng (motss)
[typescript-url]: https://github.com/Microsoft/TypeScript
[java-url]: https://www.java.com/en/download
[nodejs-url]: https://nodejs.org
[npm-url]: https://www.npmjs.com
[node-releases-url]: https://nodejs.org/en/download/releases
[vscode-url]: https://code.visualstudio.com
[vscode-lit-html-url]: https://github.com/mjbvz/vscode-lit-html
[array-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
[boolean-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[function-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
[map-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
[number-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
[object-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
[promise-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
[regexp-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
[set-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
[string-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
[version-badge]: https://flat.badgen.net/npm/v/try-lit-element
[built-with-lit-element-badge]: https://flat.badgen.net/badge/built%20with%20lit-element/v0.6.2/orange?icon=npm
[mit-license-badge]: https://flat.badgen.net/npm/license/try-lit-element
[downloads-badge]: https://flat.badgen.net/npm/dm/try-lit-element
[total-downloads-badge]: https://flat.badgen.net/npm/dt/try-lit-element?label=total%20downloads
[packagephobia-badge]: https://flat.badgen.net/packagephobia/install/try-lit-element
[bundlephobia-badge]: https://flat.badgen.net/bundlephobia/minzip/try-lit-element
[travis-badge]: https://flat.badgen.net/travis/motss/try-lit-element
[daviddm-badge]: https://flat.badgen.net/david/dep/motss/try-lit-element
[codebeat-badge]: https://codebeat.co/badges/123
[codacy-badge]: https://api.codacy.com/project/badge/Grade/123
[coc-badge]: https://flat.badgen.net/badge/code%20of/conduct/pink
[version-url]: https://www.npmjs.com/package/try-lit-element
[built-with-lit-element-url]: https://github.com/Polymer/lit-element
[mit-license-url]: https://github.com/motss/try-lit-element/blob/master/LICENSE
[downloads-url]: https://www.npmtrends.com/try-lit-element
[packagephobia-url]: https://packagephobia.now.sh/result?p=try-lit-element
[bundlephobia-url]: https://bundlephobia.com/result?p=try-lit-element
[travis-url]: https://travis-ci.org/motss/try-lit-element
[daviddm-url]: https://david-dm.org/motss/try-lit-element
[codebeat-url]: https://codebeat.co/projects/github-com-motss-try-lit-element-master
[codacy-url]: https://www.codacy.com/app/motss/try-lit-element?utm_source=github.com&utm_medium=referral&utm_content=motss/try-lit-element&utm_campaign=Badge_Grade
[coc-url]: https://github.com/motss/try-lit-element/blob/master/CODE_OF_CONDUCT.md