Small webcomponent library for simple apps

NPM

Usage

import { Component, Template, Attribute, define, bootstrap } from '@scoutgg/widgets'
import { hyper as renderer } from '@scoutgg/widgets/esm/renderers/hyper'
import hyper from 'hyperhtml/esm'

// define a component
define([
  Component('fn'),
  Attribute('name', String),
  Template(function(html) {
    html `<h1>Hello ${this.name}</h1>`
  }),
  class Greeter extends HTMLElement {

  }
])

bootstrap([
  renderer(hyper) // tell widgets how to render component
])


const greeter = document.createElement('fn-greeter')

// update attributes directly
greeter.setAttribute('name', '???')

// or use equivalent setter
greeter.name = "World"

document.body.appendChild(greeter)

Unless stated otherwise all works are:

and licensed under: