https://github.com/tirithen/lit-min
Buildless lit package, use lit without the need for a build system
https://github.com/tirithen/lit-min
buildless custom-element lit web-component
Last synced: 8 months ago
JSON representation
Buildless lit package, use lit without the need for a build system
- Host: GitHub
- URL: https://github.com/tirithen/lit-min
- Owner: tirithen
- License: mit
- Created: 2023-10-18T09:46:46.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-22T17:28:49.000Z (about 1 year ago)
- Last Synced: 2025-02-04T13:51:16.770Z (8 months ago)
- Topics: buildless, custom-element, lit, web-component
- Language: JavaScript
- Homepage:
- Size: 92.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# lit-min
A buildless package for the lit library, the file `dist/lit.js` exports all
common lit functionality and the file can therefore be copied into your project
without the need to setup a build system like rollup to use lit.
This greatly simplifies building small web UIs where npm is not needed.
Rather than using this package as an npm dependency, you can download the lit.js
file from https://www.unpkg.com/lit-min/dist/lit.js and put the file directly
in your web servers static directory.
```html
Demo
import {LitElement, html} from '/lit.js';
// As an alternative use unpkg directly, but bewhare that using third
// party domains is a security risk!
// import {LitElement, html} from 'https://www.unpkg.com/lit-min/dist/lit.js';
class Test extends LitElement {
render() {
return html`Test element`;
}
}
customElements.define('test-element', Test);
```
# With DOMPurify
To further simplify the dompurify package is also provided through the
`dist/dompurify.js` file. This is useful when using the `unsafeHTML` directive
to prevent XSS attacks.
```html
Demo
import {LitElement, html, unsafeHTML} from '/lit.js';
import {sanitize} from '/dompurify.js';
// As an alternative use unpkg directly, but bewhare that using third
// party domains is a security risk!
// import {LitElement, html} from 'https://www.unpkg.com/lit-min/dist/lit.js';
// import {sanitize} from 'https://www.unpkg.com/lit-min/dist/dompurify.js';
class Test extends LitElement {
render() {
const markup = sanitize('<strong>markup</strong>');
return html`Test ${unsafeHTML(markup)} element`;
}
}
customElements.define('test-element', Test);
```