Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juliendargelos/html-bem-element
Provides a html custom element which includes some useful shorcuts and utilitaries
https://github.com/juliendargelos/html-bem-element
Last synced: 4 days ago
JSON representation
Provides a html custom element which includes some useful shorcuts and utilitaries
- Host: GitHub
- URL: https://github.com/juliendargelos/html-bem-element
- Owner: juliendargelos
- Created: 2017-11-10T19:27:36.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-13T11:18:24.000Z (about 7 years ago)
- Last Synced: 2024-11-11T05:44:42.067Z (2 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# html-util-element
Provides a html custom element which includes some useful shorcuts and utilitaries.
## Install
```bash
npm install html-util-element
```
## Usage
```html
```
then
```javascript
class MyCustomElement extends HTMLUtilElement {
}
customElements.define('my-custom-element', MyCustomElement)
```
finally
```html
I'm full of utils.
```
## Utils
### Properties
#### `parent`
Alias of [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode).
### Methods
#### `on(types, listener, useCapture)`
Behaves the same as [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) except that you can specify multiple event types separated by a space in the first parameter.
Returns `this`
```javascript
element.on('click scroll', event => alert('You clicked or scrolled.'))
```
#### `off(types, listener, useCapture)`
Behaves the same as [`removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) except that you can specify multiple event types separated by a space in the first parameter.
Returns `this`
```javascript
element.on('click scroll', function clickedOrScrolled(event) {
alert('You clicked or scrolled.')
})
element.off('click scroll', clickedOrScrolled)
```
#### `once(types, listener, useCapture)`
Behaves the same as the `on` method except that the listener you provide will
be called once.
Returns `this`
```javascript
element.once('click scroll', event => {
alert('You clicked or scrolled, I\'ll never say again.')
})
```
#### `remove()`
Removes the element from its parent node if it exists.
Returns `true` if the element has been removed, `false` in the other case.
```javascript
if(element.remove()) {
alert('I\'ve been removed!')
}
else {
alert('I wasn\'t in the DOM anyway.')
}
```
#### `$(selectors)`
Alias of [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector).
#### `$$(selectors)`
Alias of [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll).