# ta-dom-components

> another web-component library

Latest version **0.0.8** (published 2017-12-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install ta-dom-components
pnpm add ta-dom-components
yarn add ta-dom-components
bun add ta-dom-components
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2017-12-01 |
| First published | 2017-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | jrobinsonmedia@gmail.com |
| Maintainers | jrobinson01 |

## Links

- npm: https://www.npmjs.com/package/ta-dom-components
- Repository: https://github.com/jrobinson01/ta-dom-components
- Homepage: https://github.com/jrobinson01/ta-dom-components#readme
- Issues: https://github.com/jrobinson01/ta-dom-components/issues
- npm.io page: https://npm.io/package/ta-dom-components

## Dependencies (3)

- [ta-dom](https://npm.io/package/ta-dom.md) ^0.0.6
- [morphdom](https://npm.io/package/morphdom.md) github:kozmanbalint/morphdom
- [@webcomponents/webcomponentsjs](https://npm.io/package/@webcomponents/webcomponentsjs.md) ^1.0.19

## Recent versions

- 0.0.8 (latest) — 2017-12-01
- 0.0.7 — 2017-11-28
- 0.0.6 — 2017-11-28
- 0.0.5 — 2017-11-24
- 0.0.4 — 2017-11-23
- 0.0.1 — 2017-11-22

## README

## Ta-Dom! 🎉  Components ##

A tiny web components library using [ta-dom](https://github.com/jrobinson01/ta-dom) and [morphdom](https://github.com/patrick-steele-idem/morphdom)

### What is it? ###
Ta-Dom! Components is a small library that combines some of the best features of the [React](https://github.com/facebook/react) and [Polymer](https://github.com/Polymer/polymer) libraries to make writing web components fast, fun, and easy.

#### How it Works ####
Ta-Dom! Components are built a lot like Polymer components, using a class to define your component. However, it also leverages the virtual DOM concept from React to allow writing a pure render function instead of a template (string!) littered with `<dom-if>`'s and `<dom-repeat>`'s. This lets you keep your display logic neatly in one place, where you can leverage the full power of javascript.

Like Polymer, Ta-Dom! Components expose their state as local instance properties that can be manipulated however you see fit without having to learn any new api's. Whether you change a property directly, or batch your changes through the inherited `setState({key:value})` interface, the Ta-Dom! base class will handle updating your screen for you in a fast and efficient manner thanks to [Morphdom](https://github.com/patrick-steele-idem/morphdom).

Unlike React's virtual DOM, in Ta-Dom! you're always dealing with real DOM elements. It's encouraged to use the [Ta-Dom! DOM creation library](https://github.com/jrobinson01/ta-dom) because it's awesome, but you're free to construct your DOM however you see fit. All of the native DOM api's are available.

#### Getting Started ####
`npm install --save ta-dom-components`

#### A Simple Ta-Dom Component ####
```javascript
// import TaDomElement
import TaDom from './node-modules/ta-dom-components/ta-dom-element.js';

// define your element's class
export class MyElement extends TaDom.TaDomElement {

  // define a static getter for your css
  // alternatively, return a link() element
  static get css() {
    return `
      :host {
        display: block;
        background: gray;
      }
      :host([read]) {
        background: green;
      }
      h1 {
        color: brown;
      }
      article {
        background: brown;
        color: white;
      }

    `
  }

  // define a static getter for your properties
  static get properties() {
    return {
      header:{
        value: '',
      },
      content: {
        value: ''
      },
      read: {
        value: false,
        reflectToAttribute: true
      }
    }
  }

  // a static getter for any attributes you want to observe
  static get observedAttributes() {
    return ['header', 'content', 'read']
  }

  // a render function returns the current state of your dom
  render() {
    return div({class:'wrapper'},
            h1(`${this.header}`),
            article({'on-click':(event) => this.onClickArticle(event)}, `${this.content}`)
    );
  }

  // event handler called when the article is clicked
  onClickArticle(event) {
    this.read = true;
  }
}
// register your element
TaDom.customElement('my-element', MyElement);
```

##### More Examples #####
Check out this [flash card game](https://github.com/jrobinson01/flash-cards) built with Ta-Dom! Components

---
_Source: https://npm.io/package/ta-dom-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._