Developing Components: Code Examples

This page contains code examples of common patterns using different web component libraries.

lit-html and lit-element

A simple base class for creating fast, lightweight web components. LitElement documentation lit-html documentation

Click on the links below to view live code samples:

• Basic

  • 01 Basic setup
  • 02 Manage properties
  • 03 Property changes
  • 04 Properties and attributes
  • 05 Passing properties
  • 06 Handle events
  • 07 Conditional rendering
  • 08 Repeated templates
  • 09 Update arrays and objects
  • 10 Render styles
  • 11 Fetching data
  • 12 Firing events

• Intermediate

  • 01 First updated
  • 02 Updated
  • 03 Lifecycle
  • 04 Computed properties
  • 05 Querying dom
  • 06 Light dom
  • 07 Reflecting attributes
  • 08 Dynamic repeated templates
  • 09 Slotting

• Advanced

  • 01 Property setter observer
  • 02 Until directive
  • 03 Template wrapping
  • 04 Shared templates
  • 05 Shared styles
  • 06 External template
  • 07 Template factories
  • 08 Should update

Haunted

React's Hooks API implemented for web components 👻 Haunted documentation

Click on the links below to view live code samples:

• Basic

  • 01 Basic setup
  • 02 Manage properties
  • 03 Property changes
  • 04 Handling attributes
  • 05 Passing properties
  • 06 Handle events
  • 07 Conditional rendering
  • 08 Repeated templates
  • 09 Firing events
  • 10 Virtual Components
  • 11 Using styles

• Intermediate

  • 01 Using state
  • 02 Using effects
  • 03 Fetch data
  • 04 Using reducer
  • 05 Using ref
  • 06 Using memo

• Advanced

  • 01 Using context