# custom-tag

**Repository Path**: mirrors_WebReflection/custom-tag

## Basic Information

- **Project Name**: custom-tag
- **Description**: The simplest way to define Custom Elements.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-19
- **Last Updated**: 2025-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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