Eigene Web Components mit LitElement – Teil 3: Properties & Attributes

Im letzten Teil haben wir unsere erste Web Component mit LitElement gebaut, in diesem Teil werden wir uns mit Properties und Attributes beschäftigen, um den Zustand unserer Web Component abzubilden. Dieser Beitrag ist Teil einer Serie: 

• TEIL 1: Die Webstandards

• TEIL 2: Eine eigene Komponente mit LitElement

• TEIL 3: Attributes & Properties

Wenn wir ein beliebiges HTMLElement nutzen, konfigurieren wir es über Attribute, oder Attributes:

<label for="vorname">Vorname</label>
<input id="vorname" type="text" placeholder="Bitte geben Sie Ihren Vornamen ein" name="vorname">

Aus diesem Markup generiert der Browser Instanzen der HTMLElemente. Diese Instanzen besitzen dann Eigenschaften, sogenannte Properties. Diese werden mit den Werten der Attributes aus dem Markup vorbelegt.

Properties und Attributes mit LitElement

LitElement nutzt Properties, um ein Element zu aktualisieren, d. h., wenn sich die Property ändert, wird ein Update des Elements und wenn nötig ein erneutes Rendering durchgeführt. Gleichzeitig bietet LitElement die Möglichkeit ein korrespondierendes Attribute für eine Property zu definieren.

Um eine Property zu definieren, gibt es zwei Möglichkeiten:

• Den statischen properties getter

• Die Decorator @property und @internalProperty

Der properties getter wird in einer LitElement Klasse definiert und hat folgende Signatur:

static get properties() {
  return <properties Objekt>;
}

Das Properties Objekt hat als Keys die Namen der Properties. Die Werte des Objektes sind ihrerseits Objekte und können unter anderem folgende Einträge besitzen: 

Die komplette Liste findet sich auf der LitElement Website.

Wenn wir jetzt eine Property vorname für ein Element definieren wollen, so können wir dies wie folgt tun:

static get properties() {
  return {vorname: {type: String}};
}

Wir müssen nur den Typ der Property definieren, damit LitElement die Konvertierung des Attributes vorname in die Property vornehmen kann.

Unsere Property zeigt jetzt auf das Feld vorname. Den Standardwert unserer Property können wir im Konstruktor mit festlegen, indem wir this.vorname einen Wert zuweisen. Gleichzeitig können wir this.vorname in Templates verwenden.

Property mit @property  Decorator definieren

Es gibt noch einen zweiten Weg eine Property zu definieren: den @property Decorator. Decorators sind ein neues JavaScript-Feature, welches sich zurzeit im Standardisierungsprozess befindet. Mit TypeScript und Babel kann man Decorators jedoch schon heute nutzen.

Der Decorator kann direkt aus dem Package lit-element importiert werden und direkt am Klassenfeld definiert werden:

import {property, LitElement} from 'lit-element';

class MyElement extends LitElement {

  @property{type: String}
  public vorname: string = '';

}

Das Objekt mit den übergebenen Optionen ist identisch zum statischen properties getter. Wichtig: Auch hier müssen wir den Typ angeben, leider steht die statische Typisierung von TypeScript LitElement zur Laufzeit nicht zur Verfügung.

Jetzt wo wir ein Element mit Attributes und Properties definieren können, werden wir uns im nächsten Teil der Serie mit Events beschäftigen.

Dieser Beitrag ist Teil einer Serie: 

• TEIL 1: Die Webstandards

• TEIL 2: Eine eigene Komponente mit LitElement

• TEIL 3: Attributes & Properties