Home Manual Reference Source Test

API

Template variable

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

Name Class Reference
host HTMLElement Current component
this HTMLElement The element which current Template expression locates at
view View The view which current Template expression locates at
scope View The parent view which current Template expression locates at

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

Node.JS like environment

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

Import

npm install web-cell jsdom node-fetch
import 'regenerator-runtime/runtime';          //  Export `regeneratorRuntime` to `global`

import JSDOM from 'web-cell/dist/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

Integration

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

webpack.config.js

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: [
                    'html-loader',
                    {
                        loader: 'posthtml-loader',
                        options: {
                            ident: 'posthtml'
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'to-string-loader',
                    'css-loader'
                ]
            }
        ]
    }
};

Import to other frameworks

your-component-wrapper.vue

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

<script>
    import 'path/to/your-component';

    export default {
        data() {

            return  {message: 'Come from Vue!'};
        }
    }
</script>