PolymerTS

Write Polymer 1.0 elements as TypeScript @decorated classes.

Table of contents

- Installation
- Supported features
- How to write elements
- How to correctly reference in markup
- Starting the application
- Using the yeoman generator to create new elements
- Decorators explained
- @component
- @extend
- @property
- @observe
- @computed
- @listen
- @behavior
- @hostAttributes
- Writing elements only with code: @template and @style
- Writing elements without using decorators
- Examples
- A timer-based counter element
- Using computed properties
- Using custom constructor
- Using behaviors defined externally
- Running the repo example
- What it does, in short
- Known issues
- Contributing
- Changelog

Installation

Install via bower:
``
bower install -save polymer-ts
`
You'll get the following files in bower_components/polymer-ts:
- polymer-ts.html the html file to include via that loads PolymerTS
- polymer-ts.min.html the html file to include via that loads PolymerTS (minified version)
- polymer-ts.d.ts the file to reference in your TypeScript code (/// )
- polymer-ts.ts the source TypeScript file for debugging purposes
- polymer-ts.js or polymer-ts.min.js the JavaScript file if you want to include PolymerTS via









`

In your custom element (e.g. elements/my-element.html):
`HTML






`

In your element typescript code (e.g. elements/my-element.ts):
`TypeScript
///

@component("my-element")
class MyElement extends polymer.Base
{
}

// after the element is defined, we register it in Polymer
MyElement.register();
`

The above example loads in the following order:
- WebComponents
- Polymer
- PolymerTS
- Your custom elements
- Your app

Note: due to an issue in WebComponents,
you can't use the