Developing

The web component ecosystem is evolving fast, with many libraries and solutions appearing. High level frameworks such as Angular, Vue and Stencil provide solutions which compile to web components.

Browser standards

We strongly believe that staying close to browser standards will be the best long term investment for your code. It is the basis for all our recommendations, and it means that sometimes we will not recommend a popular feature or functionality. It also means we can be faster to adopt and recommend new browser standards.

lit-html

While there are other good libraries out there, to get started we recommend using the lit-html library with the LitElement base class for developing web components.

Check out the official documentation for: lit-html and lit-element or check out our code-samples below.

Follow these steps to get started:

  1. Install the required dependencies:
npm i -D owc-dev-server lit-element
  1. Create a index.html
<!doctype html>
<html>
  <head>
    <script type="module" src="./src/my-component.js"></script>
    </head>
  <body>
    <my-component></my-component>
  </body>
</html>
  1. Create a my-component.js
import { LitElement, html } from 'lit-element';

class MyComponent extends LitElement {
  render() {
    return html`
      <p>Hello world!</p>
    `;
  }
}

customElements.define('my-component', MyComponent);
  1. Add start scripts to your package.json:
{
  "scripts": {
    "start": "owc-dev-server -o"
  }
}
  1. Start your app:
npm start

Examples

A collection of live code samples for lit-html and LitElement can be found on Stackblitz:

Browser support

Not all browsers adopt new features at the same rate. Depending on your browser support requirement, you might end up using features not yet available everywhere. In this case you will need to set up build tools to run your app during development. See building below for more.

Building

When you are ready to ship your app to production, or when you need to test your app on older browsers, take a look at our building documentation to get you started.

Further reading

See: awesome lit-html for a great collection of resources.

Last Updated: 5/11/2019, 10:58:41 AM