https://github.com/mitra42/html-element-extended
Simple web component wrapper as a module
https://github.com/mitra42/html-element-extended
Last synced: 7 days ago
JSON representation
Simple web component wrapper as a module
- Host: GitHub
- URL: https://github.com/mitra42/html-element-extended
- Owner: mitra42
- License: agpl-3.0
- Created: 2023-03-13T09:45:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-30T03:26:51.000Z (3 months ago)
- Last Synced: 2025-10-04T06:43:38.497Z (about 1 month ago)
- Language: JavaScript
- Size: 130 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
* HTML ELEMENT EXTENDED
This goal of this project is to
create a simple wrapper for web components that provides
much of the useful functionality of lifecycle frameworks like react
without the complication or overhead.
In particular there is no compile-time step for this library,
each of the files can be loaded as a module.
To use this, (currently, until its on npmjs.com)
To a caller add to `package.json/dependencies`
```
"html-element-extended": "https://github.com/mitra42/html-element-extended",
```
Then in your webcomponents.js file for example include it with
```
import { EL, HTMLElementExtended, getUrl } from './node_modules/html-element-extended/htmlelementextended.js';
```
To add a new module,
* Add a file here xxxelementextended.js
* Add to the docs here
* Add to package.json/exports
Each module is documented internally but as a TL;DR
** htmlelementextended.js
Provides HTMLElementExtended which can be used instead of HTMLElement
to create your own web components, but has the key functionality already there.
Note - all of these are under development.
If you use them please introduce yourself in a git issue,
and I'll bear this in mind when making any breaking revisions.
** eventbus.js
A simple event handler to hide the mechanisms
* At the page level create e.g. `const bus = new EventBus`
* At a receiving object typically bus.register("foo",(evt) => {...})
* At sending end bus.fire("foo",{a: 1, b: 2})
* remove is rarely used, but is there for completeness.