Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/browserkids/web-components
Non-transpiled ES13+ web components helper functions.
https://github.com/browserkids/web-components
dom ecmascript helper-functions javascript non-transpiled tests vanilla-js web-components
Last synced: about 2 months ago
JSON representation
Non-transpiled ES13+ web components helper functions.
- Host: GitHub
- URL: https://github.com/browserkids/web-components
- Owner: browserkids
- License: mit
- Created: 2020-06-13T12:13:31.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T19:07:12.000Z (about 2 years ago)
- Last Synced: 2024-11-29T04:06:00.053Z (about 2 months ago)
- Topics: dom, ecmascript, helper-functions, javascript, non-transpiled, tests, vanilla-js, web-components
- Language: HTML
- Homepage:
- Size: 263 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @browserkids/web-components
[](https://badge.fury.io/js/@browserkids%2Fweb-components)
[](https://snyk.io/test/github/browserkids/web-components?targetFile=package.json)
[](https://github.com/browserkids/web-components/actions)
[](https://libraries.io/npm/@browserkids/web-components)
This is a collection of useful web components helper functions. They are all written in latest/cutting edge [ECMAScript 2022] code and are not transpiled.
## Installation
### Using a CDN
Fastest way to get going. See for yourself:
```html
import { define } from 'https://unpkg.com/@browserkids/web-components';
define(class MyElement extends HTMLElement {
/* Your custom element logic. */
});
```
### Using a bundler
Semi-fast way as well. Just install it via [npm].
```shell
npm install -S @browserkids/web-components
```
Import the functions where you need them.
```js
import { define } from '@browserkids/web-components';
```
## Browser support
*Almost* every function uses at least one feature of [ECMAScript 2022] , but **no** ESNext features — promised. So support should be fine for “evergreen” browsers at the time of writing. This means that Internet Explorer is out of the game.
As this library is not transpiled nor ever will be, you should use [polyfills](https://polyfill.io/) in case you need to support a specific browser version.
## API
1. **[define(elementConstructor)](./src/define.js)**
The `define()` helper function registers a custom element constructor to the [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define). To reduce redundant tasks like [creating a ShadowDOM](./docs/createShadowRoot.md), [binding attributes](./docs/bindAttributes.md), [setting up event listeners](./docs/bindEventListeners.md) or fetching [DOM references](./docs/findReferences.md), the given element constructor will be _extended_ and _enhanced_ to have a consistent developing experience.
```html
import { define } from 'https://unpkg.com/@browserkids/web-components';
define(class MyElement extends HTMLElement {
// By default define() uses the class name as element name,
// you can override this by defining a custom name.
static get name() { return 'my-element'; }
// You can define a static settings field to override the settings
// for the individual functions that define() is using.
static settings = {
bindAttributes: {},
bindEventListeners: {},
createShadowRoot: {},
findReferences: {},
};
// Will be used by bindAttributes and turns into a proxy object.
data = {};
// Will be used by createShadowRoot for shadow dom creation.
template = '';
// Will be called once the element has been inserted to the DOM,
// and the constructor of that class has finished.
ready() {}
});
```
[ECMAScript 2022]: https://kangax.github.io/compat-table/es2016plus/
[Shadow DOM]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
[npm]: https://www.npmjs.com/