https://github.com/webreflection/hyperhtml-element
An extensible class to define hyperHTML based Custom Elements.
https://github.com/webreflection/hyperhtml-element
Last synced: 10 months ago
JSON representation
An extensible class to define hyperHTML based Custom Elements.
- Host: GitHub
- URL: https://github.com/webreflection/hyperhtml-element
- Owner: WebReflection
- License: isc
- Created: 2017-07-28T14:39:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-01-28T13:26:52.000Z (almost 4 years ago)
- Last Synced: 2025-03-29T06:05:53.209Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.2 MB
- Stars: 201
- Watchers: 12
- Forks: 25
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# hyperHTML-Element
[](https://opensource.org/licenses/ISC) [](https://travis-ci.org/WebReflection/hyperHTML-Element) [](https://greenkeeper.io/) 
An extensible class to define hyperHTML based Custom Elements.
`npm install hyperhtml-element`
#### hyperHTML included
This class attaches all `hyperHTML` methods to itself,
with the only exception of the `define` method,
used in here to define Custom Elements instead.
To have same [define functionality](https://viperhtml.js.org/hyperhtml/documentation/#api-3),
please use `HyperHTMLElement.intent(...)` which provides exact same API.
### Documentation
You can find more info about this helper in [hyperHTML documentation](https://viperhtml.js.org/hyperhtml/documentation/#components-2) page.
### The Class
```js
const HyperHTMLElement = require('hyperhtml-element');
class MyElement extends HyperHTMLElement {
// observed attributes are automatically defined as accessors
static get observedAttributes() { return ['key']; }
// boolean attributes are automatically defined as accessors
// and will set or remove the passed value
static get booleanAttributes() { return ['active']; }
// invoked once the component has been fully upgraded
// suitable to perform any sort of setup
// granted to be invoked right before either
// connectedCallback or attributeChangedCallback
created() {
// triggers automatically attributeChangedCallback
this.key = 'value';
}
attributeChangedCallback(name, prev, curr) {
// when invoked, attributes will be already reflected
// through their accessor
this.key === curr; // true, and curr === "value"
this.getAttribute('key') === this.key; // always true
this.render();
}
render() {
// lazily defined, this.html property points to an hyperHTML bound context
// which could be the element shadowRoot or the element itself.
// All events can be handled directly by the context, thanks to handleEvent
// https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
return this.html`
Hello HyperHTMLElement
( ${this.state.clicks} )`;
}
// using the inherited handleEvent,
// events can be easily defined as methods with `on` prefix.
onclick(e) {
// `this` refers to the current custom element
console.log(this, 'click', e.target);
// state handling, updates the view
this.setState({clicks: this.state.clicks + 1});
}
// alternatively, you can specify a `data-call`
// attribute with the name of the method to invoke
// this.html`try`;
onAnyEvent(e) {
// `this` still refers to the current custom element
console.log(this, e.type, e.currentTarget, e.target);
}
// you can also use Preact-like events handling
// this is less efficient, but migration friendly.
// The method is bound once per instance so that
// this.handleClick === this.handleClick is always true
// this.html`try`;
handleClick(e) {
// `this` still refers to the current custom element
console.log(this, e.type, e.currentTarget, e.target);
}
// define a default state to use whenever this.state is accessed
// it can create states from observed properties too
get defaultState() {
return {clicks: 0, key: this.key};
}
// this method is Preact friendly, once invoked
// as this.setState({new: 'value'});
// it will shallow copy properties over
// and it will invoke this.render() right after
setState(objOrFn)
// all other native Custom Elements method works as usual
// connectedCallback() { ... }
// adoptedCallback() { ... }
}
// classes must be defined through their public static method
// this is the moment the class will be fully setup once
// and registered to the customElements Registry.
MyElement.define('my-element');
```
#### New in v1.8
You can now define custom elements builtins too:
```js
class MyLink extends HyperHTMLElement {
created() { this.render(); }
render() {
return this.html`hello there!`;
}
}
MyLink.define('my-link', {extends: 'a'});
```
### Compatibility
`HyperHTMLElement` is compatible with every mobile browser and IE11 or greater.
There is a [native live test](https://webreflection.github.io/hyperHTML-Element/test/) page also [transpiled for ES5](https://webreflection.github.io/hyperHTML-Element/test/?es5) browsers.