Examples

Live demo gallery

Every example below runs as a standalone page at demo.webcomponent.io ↗, a live gallery with the source alongside each demo.

Demo	Shows
Boolean props ↗	presence/absence reflection, `toggleAttribute`, `[flag]` selectors
Custom attribute converters ↗	`toAttribute`/`fromAttribute` for `Date` and array props
Props blueprint ↗	`static props` as the single source of defaults and types
Prop type enforcement ↗	`static strictProps` and the log-not-throw default
Compile-time prop types ↗	typing `this.props` in TypeScript
Typed props ↗	attribute round-trips restoring the declared type
Templating ↗	string vs `html` tagged-template rendering
Render reconciliation ↗	in-place patching preserving focus, caret and input state
Style objects ↗	calculated and conditional styles via the `style` prop
Shadow DOM ↗	`static shadowRootInit`
Constructable styles ↗	`static styles`, including composing several sheets
Lifecycle order ↗	each hook logged as it fires
Attribute lifecycle ↗	how attribute changes drive the hooks
onChanges payload ↗	camelCase `property` vs kebab-case `attribute`
Just the parts ↗	using `html`/`createElement` without the base class
Kitchen sink ↗	several features together
Single-file pen ↗	counter and toggle in one HTML file

CodePen 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://esm.sh/web-component-base@latest'

      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: