Skip to content
WCB (alpha)

Examples

1. To-Do App

A simple app that allows adding / completing tasks: View on CodePen ↗

To-Do App screen recording

2. Single HTML file Example

Here is an example of using a custom element in a single .html file.

<!doctype html>
<html lang="en">
  <head>
    <title>WC Base Test</title>
    <script type="module">
      import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js'


      class HelloWorld extends WebComponent {
        static props = {
          myName: 'World',
        }
        get template() {
          return `<h1>Hello ${this.props.myName}!</h1>`
        }
      }


      customElements.define('hello-world', HelloWorld)
    </script>
  </head>
  <body>
    <hello-world my-name="Ayo"></hello-world>
    <script>
      const helloWorld = document.querySelector('hello-world')
      setTimeout(() => {
        helloWorld.props.myName = 'Ayo zzzZzzz'
      }, 2500)
    </script>
  </body>
</html>

3. Feature Demos

Some feature-specific demos:

  1. Context-Aware Post-Apocalyptic Human
  2. Simple reactive property
  3. Counter & Toggle
  4. Using custom templating (lit-html)
  5. Using dynamic style objects
  6. Using the Shadow DOM
  7. Using tagged templates in your vanilla custom element