Simplified Web Components

Table of contents

• Introduction
  • Dependencies
• Installation
  • Manual
  • Using NPM
• Documentation
  • WebComponent
  • EventContainer
• Example Usage
• Licence

Introduction

The SimplifiedWebComponents package simplifies the process of using custom web components. Decreasing the amount of boilerplate code needed for each component.

• Dependencies

  • ES2020
  • (dev) jsdom
  • (dev) vitest
  • (dev): @rollup/plugin-node-resolve
  • (dev): rollup

Installation

• Using NPM

  • npm i simplified-web-components
  • import using: import { WebComponent, EventContainer } from 'simplified-web-components'

Documentation

• WebComponent

• EventContainer

Example Usage

// Local URL's to files.
const MODULE_PATH = import.meta.url
const html = new URL('./button.html', MODULE_PATH)
const css = new URL('./button.css', MODULE_PATH)

// Create web component.
const buttonComponent = new WebComponent('button-component', html, css)

/**
 * Changes the container background color to a random color.
 *
 * @param {MouseEvent} event - The click event object.
 */
const clickEvent = function (event) {
  event.stopPropagation()

  // Check if our button fired event.
  if (event.target.id === 'my-button') {
    const container = event.currentTarget

    // Set a random color.
    let color = '#'
    for (let i = 0; i < 6; i++) {
      color += Math.floor(Math.random() * 10) // Number between [0 - 9].
    }

    container.style.backgroundColor = color
  }
}

// Register click event.
const clickEventContainer = new EventContainer('click', '#button-container', clickEvent)
buttonComponent.registerEvent(clickEventContainer)

// Define component.
await buttonComponent.defineComponent()

Licence

The source code is licensed under the MIT license, which can be found in the LICENSE file.