https://github.com/webreflection/custom-tag

The simplest way to define Custom Elements.
https://github.com/webreflection/custom-tag

customelements definition init simple

Last synced: 12 months ago
JSON representation

The simplest way to define Custom Elements.

• Host: GitHub
• URL: https://github.com/webreflection/custom-tag
• Owner: WebReflection
• License: mit
• Created: 2017-01-11T21:10:41.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-01-25T10:53:25.000Z (about 9 years ago)
• Last Synced: 2025-03-27T14:11:09.426Z (about 1 year ago)
• Topics: customelements, definition, init, simple
• Language: JavaScript
• Homepage:
• Size: 15.6 KB
• Stars: 11
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# CustomTag

The simplest way to define Custom Elements.

Based on [Classtrophobic](https://github.com/WebReflection/classtrophobic),

[safely usable](https://medium.com/@WebReflection/a-case-for-js-classes-without-classes-9e60b3b5992#.iof2l3x2b) before or after Babel transpilation.

### API

```js

const MyButton = CustomTag({

  // registered automatically with a name

  name: 'my-button',

  // supports native extends too

  extends: 'button',

  // extends: 'my-prev-comp'

  // extends: HTMLButtonEmenent (or others)

  // list of properties to watch/observe

  watch: ['one', 'or-more', 'attributes'],

  // automatically reflected through the element too

  // this.one = 1; // triggers changes with string value '1'

  // invoked once per each component

  // fully customizable once invoked

  onInit() {

    this.textContent = this.nodeName; // BUTTON

    this.on('click', console.log);

  },

  // invoked on adopt, connect, disconnect, changes

  onAdopt() {},

  onConnect() {},

  onDisconnect() {},

  onChange(prop, prev, curr) {},

  // any other method, getter, or static

  // what you can define with classtrophobic

  // will work out of the box in here too

  on(...args) {

    this.addEventListener(...args);

    return this;

  }

});

```

(C) 2017 Andrea Giammarchi - MIT Style License