Examples

Registration

To register a component, you need to create a class which extends TypedPolymer, and after declaration, call the .register() method on it.

Components by default take the name from the class name, so a class MyComponent will create a component with a name my-component.

class MyComponent extends TypedPolymer {}
MyComponent.register(); // will register `my-component`

If you are not satisfied with automatic naming, you can always pass the name to the .register function.

class MyComponent extends TypedPolymer {}
MyComponent.register("my-new-name"); // will register `my-new-name`

You can also use a decorator instead of .register() function.

@register class MyComponent extends TypedPolymer {}

@register("another-named-component") class AnotherComponent extends TypedPolymer {}

Creating an instance

There are 3 ways of creating an instance.

Little preparation

class MyComponent extends TypedPolymer {
  constructor() {
    // will be called as factoryImpl
  }
}
MyComponent.register();

Declarative

<my-component></my-component>

Using document.createElement

document.CreateElement("my-component")

Factory

MyComponent.create()

@register

There are 2 ways of registering components, using MyComponent.register() function and @register decorator. It works the same way as the function (with or without a name). The only restriction is that if you use it, it has to go as a first decorator.

@template

Provide an HTML template, as a string. Currently templates have to be inline, but will be possible to provide a path to a template.

@template(`<h1>Hello World!</h1>`)
class MyComponent extends TypedPolymer {
  // ...
}
MyComponent.register();

@styles

Provide a list of styles (contents for the <style> tags), or shared styles names (order of style as declared).

@styles(["normalize-css", `:host {display: none} h1 {display: flex}`])
class MyComponent extends TypedPolymer {
  // ...
}
MyComponent.register();

@extend

Extend native HTML elements.

@extend("button")
class MyComponent extends TypedPolymer {
  // ...
}
MyComponent.register();

@hostAttributes

Static attributes on host.

@hostAttributes({ contenteditable: true })
class MyComponent extends TypedPolymer {
  // ...
}

@behavior

Add a behavior to the component.

@behavior(MyBehavior)
class MyComponent extends TypedPolymer {
  // ...
}

@set

@set decorator is used to create a property (or a computed property). It has the total of 5 interfaces:

• @set(DefaultValue) property - set the default value and guess the type
• @set(Type) property - set the type only (default value will be undefined)
• @set(DefaultValue, Type) property - set the default value and set the type
• @set(Type) method(a, b) {} - creates a computed property, sets type and observes properties listed as arguments
• @set("o.a, o.b", Type) method(a, b) {} - creates a computed property, sets type and observes properties or paths provided in first argument

class MyComponent extends TypedPolymer {
  @set(Boolean) booleanType: boolean;
  @set(5) numberValue: number;
  @set(() => ({testing: true})) objectValue: any;
  @set(null, String) stringValue: string;

  @set(Boolean) computed1(numberValue): boolean { return numberValue > 5 }
  @set("objectValue.testing", Boolean) computed2(isTesting: boolean): boolean { return isTesting }
}
MyComponent.register();

@reflectToAttribute

Causes the corresponding attribute to be set on the host node when the property value changes.

class MyComponent extends TypedPolymer {
  @set(Boolean) @reflectToAttribute booleanType: boolean;
}
MyComponent.register();

@readOnly

Makes it impossible to set the property directly by assignment or data binding.

class MyComponent extends TypedPolymer {
  @set(Boolean) @readOnly booleanType: boolean;
}
MyComponent.register();

@notify

Makes the property available for two-way data binding.

class MyComponent extends TypedPolymer {
  @set(Boolean) @notify booleanType: boolean;
}
MyComponent.register();

@once

Registers a handler to the event, that will unregister once fired.

class MyComponent extends TypedPolymer {
  @once("some-event")
  handler(): void {}
}

@on

Registers a handler to the event.

class MyComponent extends TypedPolymer {
  @on("some-event")
  someEventHandler(): void {}

  @on("my-element.some-event")  // will listen to `some-event` on element with an id `my-element`
  someEventHandlerWithId(): void {}

  @on("some-event", "button")  // will listen to `some-event` on a button
  someEventHandlerWithSelector(): void {}
}

@observe

Sets an observer function for a single property/path or a list of properties/paths.

class MyComponent extends TypedPolymer {
  @set(Number) num: number;
  @set(String) str: string;

  @observe("number")
  numChanged(newValue: number, oldValue: number): void {}

  @observe("num, str")
  numOrStrChanged(num: number, str: string): void {}
}