https://github.com/webreflection/as-custom-element
Setup any element as if it was a Custom Element
https://github.com/webreflection/as-custom-element
Last synced: about 1 year ago
JSON representation
Setup any element as if it was a Custom Element
- Host: GitHub
- URL: https://github.com/webreflection/as-custom-element
- Owner: WebReflection
- License: isc
- Created: 2020-07-26T11:34:23.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-14T08:11:02.000Z (over 3 years ago)
- Last Synced: 2025-07-22T10:34:05.921Z (about 1 year ago)
- Language: JavaScript
- Size: 69.3 KB
- Stars: 30
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# As Custom Element
The easiest way to add Custom Elements like callbacks to any node.
Compatible with [modern browsers](https://webreflection.github.io/as-custom-element/test/), as well as [IE11](https://webreflection.github.io/as-custom-element/test/ie/), and no polyfills are needed, for a minified size less than *0.8K*.
```js
import {upgrade, downgrade} from 'as-custom-element';
const someBehavior = {
// lifecycle callbacks
connectedCallback() {
console.log(this, 'is connected');
},
disconnectedCallback() {},
// attributes related helpers
observedAttributes: ['one', 'or', 'more'],
attributeChangedCallback(attributeName, oldValue, newValue) {}
};
upgrade(document.querySelector('#any'), someBehavior);
// to drop the behavior at any time
downgrade(document.querySelector('#any'), someBehavior);
```