https://github.com/yhwh-script/elements
A lifecycle implementation of customElements for WebComponents.
https://github.com/yhwh-script/elements
customelements javascript javascript-framework sfc webcomponents
Last synced: 6 months ago
JSON representation
A lifecycle implementation of customElements for WebComponents.
- Host: GitHub
- URL: https://github.com/yhwh-script/elements
- Owner: yhwh-script
- License: unlicense
- Created: 2025-01-22T23:02:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-30T15:30:46.000Z (about 1 year ago)
- Last Synced: 2025-01-30T16:28:55.383Z (about 1 year ago)
- Topics: customelements, javascript, javascript-framework, sfc, webcomponents
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@yhwh-script/elements
- Size: 479 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# elements
This is a minimalistic, reactive **lifecycle implementation of customElements for WebComponents**. Check it out!
## Installation
It is recommended to use npx
```npx @yhwh-script/create-app {YOUR_PROJECT}```
However, you can also clone this repository:
```git clone https://github.com/yhwh-script/elements.git
cd elements
npm install
npm run dev
```
## How-To
- create single file HTML components as customElements with ``, `<style>` and `<template>` under `./public/elements/{prefix}/{prefix}-{suffix}.html`
- use them as usual customElements `<prefix-suffix>`
- you have access to the `shadowDocument` and `state`
- set state by `shadowDocument.host.dataset.state = JSON.stringify({newState})`
- use event bubbling
## NO-GOs
- **never** `addEventListener` to `shadowDocument`
## Further reading
- Check out my [examples project](https://github.com/yhwh-script/examples)
- the [SQLite extension](https://github.com/yhwh-script/sqlite)
- or (recommended) the [SQLite extension with examples](https://github.com/yhwh-script/sqlite-examples)