@biotope/element v4.0.0-0

Biotope Element

Installation

You can install the biotope element in your project using npm

npm install @biotope/element --save

or yarn

yarn add @biotope/element

After that to use it, import it in your project:

import Component from '@biotope/element';

Usage

To use the biotope element, you have to extend it with your custom class:

import Component from '@biotope/element';

export class MyButton extends Component {
  public static componentName = 'my-button';
  
  public render(): HTMLFragment {
    return this.html`
      Hello World
    `;
  }
}

After defining your class which you can do using existing methods (link) you have to call register on the class itself to use it in a javascript/typescript file:

import Component from '@biotope/element';

export class MyButton extends Component {
  render() {
    return this.html`
      Hello World 🐤
    `;
  }
}

MyButton.componentName = 'my-button';
MyButton.register();

/////////////////////////////////////////////

// typescript
import Component from '@biotope/element';

export class MyButton extends Component {
  public static componentName = 'my-button';

  public render(): HTMLFragment {
    return this.html`
      Hello World 🐤
    `;
  }
}

MyButton.register();

After that you can use it in your html like so:

<script src="my-button.js"></script>
<my-button></my-button>

This will result in the following html:

<my-button>
  Hello world 🐤
</my-button>

Polyfills

Webcomponents

Webcomponents are not supported by all browsers. Even the newest browsers have not integrated the spec yet. To still be able to use biotope element in your project in all major browsers, please include the webcomponent polyfills in your project. Here is the NPM package.

Documentation

You can find the documentation here.

In order to contribute to the documentation you can start a local server with npm start and then start editing the files in docs.