Templates

The HTML markup used in web components can be defined using the template property on a component.

class MyComponent extends wire.ui.WebComponent {

  static get template() {
    return '<div></div>';
  }
    
}

It can also be created in an HTML file. A reference to the file is defined in the templateUrl property.

class MyComponent extends wire.ui.WebComponent {

  static get templateUrl() {
    return './my-component.html';
  }
    
}

<!-- my-component.html -->
<div></div>

Properties

The HTML attributes of a component are defined using the properties property.

class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      message: true
  }
  static get template() {
    return '<div>{message}</div>';
  }
      
}

These attributes can then be used to pass data into the component.

<my-component message="Hello web components"></my-component>

<!-- Output -->
<div>Hello web components</div>

In the example above, curly brackets interpolation {} is used to reference the property data in the components' template. For more flexible bindings data to the template's markup, use binding attributes.