https://github.com/WebReflection/regular-elements

Custom Elements made available for any node, and through CSS selectors
https://github.com/WebReflection/regular-elements

Last synced: about 2 months ago
JSON representation

Custom Elements made available for any node, and through CSS selectors

• Host: GitHub
• URL: https://github.com/WebReflection/regular-elements
• Owner: WebReflection
• License: isc
• Created: 2018-11-17T17:11:47.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-06-15T12:28:11.000Z (over 3 years ago)
• Last Synced: 2024-07-17T11:10:57.418Z (2 months ago)
• Language: JavaScript
• Homepage: https://webreflection.github.io/regular-elements/test/
• Size: 149 KB
• Stars: 90
• Watchers: 4
• Forks: 3
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# regularElements

- - -

**V1 Breaking Changes**

  * the definition now follows standard naming convention

  * callbacks are callbacks, not even driven anymore

  * if present, `observedAttributes` must contain at least one attribute name

  * browsers older than IE 11 might not work as expected

  * the minified gzipped size is now *~0.9K*

- - -

Everything I love about Custom Elements made available for any node, and through CSS selectors.

No Custom Elements, no Shadow DOM, and no polyfills are needed.

```js

// if loaded as , it's exposed as global regularElements

import {define} from 'regular-elements';

define('button.alive', {

  // lifecycle callbacks

  connectedCallback() {

    this.disabled = false;

    this.classList.add('fade-in');

  },

  disconnectedCallback() {

    console.log('goodbye');

  },

  // attributes notifications

  observedAttributes: ['only', 'these', 'attrs'],

  attributeChangedCallback(attributeName, oldValue, newValue) {

    console.log(attributeName, oldValue, newValue);

  }

});

define('#any > sel-ector[you=like]', {

  // ...

});

```

The module exports the same _API_ found in [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry): `define(selector, definition)`, `get(selector)`, `upgrade(node)`, and `whenDefined(selector)`.

## Best Practices

Since, like it is for Custom Elements, you can define one selector per time,

it is suggested to not use too generic selectors such `a` or `button` in case you'd like to compose behaviors.

A single node can indeed behave in various way, as long as it matches one or more defined selector.

```js

regularElements.define('.clicker', {

  connectedCallback() {

    this.addEventListener('click', theClicker);

  }

});

regularElements.define('.hi-five', {

  connectedCallback() {

    this.textContent += ' 🖐 ';

  }

});

```

Whenever an element with either the class `clicker`, or `hi-five`, or both is created or found live on the DOM, it will be setup once per behavior, as [demoed here](https://webreflection.github.io/regular-elements/test/multi.html).