dna

Evolution-based components.

DNA provides a base class to extend for components and a define method.

The BaseComponent class

BaseComponent defines the component life cycle, as well as its template, properties, events and styles.

import { BaseComponent } from '@dnajs/idom';

class HelloWorld extends BaseComponent {
  get template() {
    return ...
  }

  get css() {
    return ...
  }

  get properties() {
    return { ... }
  }

  get events() {
    return { ... }
  }

  connectedCallback() { ... }
  disconnectedCallback() { ... }
  attributeChangedCallback() { ... }
}

But declare the Component class is not enough. Definition is required to associate a tag name to the component, in order to re-use it from other templates:

import { BaseComponent, define } from '@dnajs/idom';

class ChildElement extends BaseComponent {}

define('child-element', ChildElement);

class ParentElement extends BaseComponent {
  get template() {
    return <child-element />;
  }
}

define('parent-element', ParentElement);

Extending native elements

A component can be defined as an extension of a native element. This is extremely useful for semantic and accessibility purposes. For example, defining a custom button as follow

define('app-button', class AppButton extends BaseComponent {});

will generate an <app-button>...</app-button> node in the DOM, which is not navigable by default and neither clickable like native buttons, unless the native button had been extended:

define('app-button', class AppButton extends BaseComponent {}, { extends: 'button' });

Now, you can instantiate an AppButton in templates using the is attribute as follow <button is="app-button" />.