bayareawebpro / web-components-example

Web Components Example

Demo: https://bayareawebpro.github.io/web-components-example/

Constraints

• No Build Tools.
• No Dependencies.
• Native JS Modules.

Features

• Reactive State.
• Directive Compiler.
• Expression Bindings.

ToDo

• Integrate WebWorker for Compiler Process MultiThreading?

Text Binding

<div data-bind:text="state.items.length"></div> 

Attribute Binding

<button
    type="button"
    data-bind:disabled="!state.enabled">
    Add Item
</button>

Event Binding

<button
    type="button"
    onclick="addItem()">
    Add Item
</button>

Model Binding

<input 
    type="text" 
    data-model="state.value"
/>

State Binding

<my-component 
    data-state:item="item">
</my-component>

Condition Binding

<template data-if="state.enabled">
    I'm enabled.
</template>
<template data-else>
    I'm disabled.
</template>

Loop Binding

<template data-for="item of state.items">
    <my-component
        data-bind:key="item.id"
        data-state:item="item">
    </my-component>
</template>