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 --save

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() {
    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 the html: index.js

import Component from '@biotope/element';

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

MyButton.register();

After that you can use it in your html like that: index.html

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

This will result inthe following html:

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

Polyfills

Array.prototype.find

As we want to keep biotope element slim. We are not shipping polyfills for legacy browsers. Biotope element leverages the Array.prototype.find function. Which is not supported by older browsers. To use biotope element there, please take care of loading an appropriate polyfill

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.