Install

JavaScript Modules

chessboard-element is distributed as unbundled JavaScript modules, and imports its dependencies like LitElement with "bare" module specificers. These types of import specifiers are not supported natively by web browsers yet, so some small amount of tooling is neccessary to transform bare specifiers into paths so that browsers can load the element.

See How to Publish Web Components to NPM for details on why chessboard-element is published this way.

Bare module specifiers are extremely common in the npm ecosystem, so tool support is very good. Tools that support bare module specifiers include:

Rollup
es-dev-server
unpkg.com
Parcel
Pika
Webpack

NPM

chessboard-element is available on npm under the package name chessboard-element

npm install chessboard-element

Once installed locally, you'll need to load or import the element definition. You can do this from JavaScript or HTML:

JavaScript / TypeScript

import 'chessboard-element';

HTML

<script type="module" src="/node_modules/chessboard-element/index.js"></script>

Note the type="module" attribute is required. The /node_modules/chessboard-element/index.js path must be adjusted to the path you serve your node_modules from, and the modules must be transformed to rewrite the bare specifiers.

Content Delivery Network

You can use chessboard-element via the unpkg CDN with the following links:

<script type="module" src="https://unpkg.com/chessboard-element?module"></script>

unpkg.com with the ?module parameter automatically rewrites import specificers to the correct paths, so everything will load in modern browsers.

If you want to use the bundled build, you can, without the ?module parameter:

<script type="module" src="https://unpkg.com/chessboard-element/bundled/chessboard-element.bundled.js"></script>