Home Manual Reference Source Test


Template syntax

All global variables on window are available in WebCell Template expression, including Scoped variables shown below:

Name Class Reference
host HTMLElement Current component

(More details)

Life-cycle hook

All life-cycle hooks defined in Web components specification are available in WebCell, including Extension hooks shown below:

Signature Execution condition
slotChangedCallback(assigned: Node[], slot: HTMLSlotElement, name: ?String) Same as slotchange event
viewUpdateCallback(newData: Object, oldData: Object, view: View): Boolean Before current component rendered
viewChangedCallback(data: Object, view: View) After current component rendered

Router & Shared state

Create an App

More details

npm init web-cell path/to/your_project \
    --app \
    --remote https://git-example.com/your_id/repo_name.git

Create a Router component

More details


import { component } from 'web-cell';

import HTMLRouter, { load, back } from 'cell-router';

import App from '../scheme/App';    //  Small app may not need this

@component({ store: App })
export default  class AppRouter extends HTMLRouter {

    indexPage() {  return '<page-index />';  }

    secretPage(id) {  return `<h1>Secret ${id}</h1>`;  }

    keepSecret() {  return !!this.store.user;  }

Define a Shared state

More details


import Model, { mapGetter, is } from 'data-scheme';

import User from './User';

export default  class App extends Model {

    @is( User )
    set user(value) {  this.set('user', value);  }


import Model, { mapGetter, is, Range, Email, Phone, URL } from 'data-scheme';

export default  class User extends Model {

    @is(/^[\w-]{3,20}$/, '')
    set name(value) {  this.set('name', value);  }

    @is(Email, '')
    set email(value) {  this.set('email', value);  }

    @is( Phone )
    set phone(value) {  this.set('phone', value);  }

    @is([0, 1, 2],  2)
    set gender(value) {  this.set('gender', value);  }

    @is(Range( 1900 ))
    set birthYear(value) {  this.set('birthYear', value);  }

    @is(URL, 'http://example.com/test.jpg')
    set avatar(value) {  this.set('avatar', value);  }

    @is( URL )
    set URL(value) {  this.set('URL', value);  }

    @is( String )
    set description(value) {  this.set('description', value);  }

Node.JS like environment

WebCell can run in any Non-browser environment which supports CommonJS or ECMAScript module based on JSDOM.


npm install web-cell jsdom node-fetch

Add these import before any Non-inset packages:

import 'regenerator-runtime/runtime';          //  Export `regeneratorRuntime` to `global`

import JSDOM from 'web-cell/source/polyfill';    //  Export `self` & some DOM API to `global`

import * as WebCell from 'web-cell';

Typical cases

  1. WebCell DevCLI uses DOM utility methods of WebCell


webpack configuration

You can use webpack instead of web-cell command.

npm install --save-dev \
    webpack webpack-cli \
    html-loader posthtml-loader \
    to-string-loader css-loader


const path = require('path');

module.exports = {
    entry: 'path/to/your-component/index.js',
    output: {
        filename: 'your-component.js',
        path: path.resolve(__dirname, 'dist')
    module: {
        rules: [
                test: /\.html$/,
                use: [
                        loader: 'posthtml-loader',
                        options: {
                            ident: 'posthtml'
                test: /\.css$/,
                use: [

Import to other frameworks


    <your-component v-model="message"></your-component>
        Text from Web component: {{message}}

    import 'path/to/your-component';

    export default {
        data() {

            return  {message: 'Come from Vue!'};