@divetool/coral NPM

Coral Vanilla Web Components

The Coral's web components are built using StencilJS. Read more about it in the StencilJS website.

Documentation

Read the full docs at https://divetool.github.io/coral

Getting started

You can start using Coral's web components via 2 methods.

Using the npm module

Install the @divetool/coral package

npm install @divetool/coral

Define Coral components to be used as web-components in your HTML

import { defineCustomElements, applyPolyfills } from '@divetool/coral/loader';

// Define all Coral custom elements
defineCustomElements();

// Or if you need pollyfills to work with custom elements:
applyPolyfills().then(() => {
  defineCustomElements();
});

You can also define a single component:

import { defineCustomElement as defineCrlButton } from '@divetool/coral/dist/components/crl-button';

// Define CrlButton component
defineCrlButton();

In your HTML:

<html>
  <body>
    <crl-button>Click me</crl-button>
  </body>
</html>

Script tag or native ESmodule

You can load Coral web components in a website/application by adding the following script tag:

Unpkg CDN:

<script
  type="module"
  src="https://unpkg.com/@divetool/coral/dist/coral/coral.esm.js"
  defer
></script>

jsDelivr CDN:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@divetool/coral/dist/coral/coral.esm.js"
  defer
></script>

Your HTML will look similar to this

<html>
  <head>
    <script
      type="module"
      src="https://unpkg.com/@divetool/coral/dist/coral/coral.esm.js"
      defer
    ></script>
  </head>
  <body>
    <crl-button>Click me</crl-button>
  </body>
</html>

Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement:

<html>
  <head>
    <script type="module">
      import { defineCustomElements } from 'https://unpkg.com/@divetool/coral/loader/index.js';
      defineCustomElements();
    </script>
  </head>
  <body>
    <crl-button>Click me</crl-button>
  </body>
</html>