Simple component example and comparison using `baseui-wc-base-component`

index.html

<p>Click on each header element to see number of clicks updated
<header-text-base text="Rendered with base-custom-element"></header-text-base>
<header-text-lit text="Rendered with lit-html"></header-text-lit>
<header-text-hyper text="Rendered with hyper-html"></header-text-hyper>

script.babel

const BaseComponent = window['base-component'].default;

class HeaderTextBase extends BaseComponent {
    static get observedAttributes() { return ['text']; }
 
    willConnect() {
        this.state = { count: 0 };
    }
 
    didRender() {
        const clickHandlerEle = this.find('[js-click-handler]');
        this.on('click', clickHandlerEle, this);
    }
 
    onclick() {
        this.setState((prevState) => ({ count: prevState.count + 1 }));
    }
 
    render() {
        /* choose your own rendering library or use vanilla JS like below */
        const { text } = this;
        const clickCount = (this.state.count) ? ` -> click count ${this.state.count}` : '';
 
        this.innerHTML = `
            <h2 class="header-text__htext">
                <span js-click-handler>${text}</span>
                <span>${clickCount}</span>
            </h2>
        `;
    }
}
 
customElements.define('header-text-base', HeaderTextBase);


const withLitHTML = window['with-hyperHTML'].default;
class HeaderTextLit extends withLitHTML {
    static get observedAttributes() { return ['text']; }

    willConnect() {
        this.state = { count: 0 };
        this.onClickCallback = this.onClickCallback.bind(this);
    }

    onClickCallback() {
        this.setState((prevState) => ({ count: prevState.count + 1 }));
    }

    render() {
        const { domRender, text, onClickCallback } = this;
        const clickCount = (this.state.count) ? ` -> click count ${this.state.count}` : '';

        return domRender`
            <h2 class="header-text__htext">
                <span onclick="${onClickCallback}">${text}</span>
                <span>${clickCount}</span>
            </h2>
        `;
    }
}

customElements.define('header-text-lit', HeaderTextLit);


const WithHyperHTML = window['with-hyperHTML'].default;

class HeaderTextHyper extends WithHyperHTML {
    static get observedAttributes() { return ['text']; }

    willConnect() {
        this.state = { count: 0 };
        this.onClickCallback = this.onClickCallback.bind(this);
    }

    onClickCallback() {
        this.setState((prevState) => ({ count: prevState.count + 1 }));
    }

    render() {
        const { domRender, text, onClickCallback } = this;
        const clickCount = (this.state.count) ? ` -> click count ${this.state.count}` : '';

        return domRender`
            <h2 class="header-text__htext">
                <span onclick="${onClickCallback}">${text}</span>
                <span>${clickCount}</span>
            </h2>
        `;
    }
}

customElements.define('header-text-hyper', HeaderTextHyper);

scripts

<script src="https://unpkg.com/@webcomponents/custom-elements/custom-elements.min.js"></script>
<script src="https://unpkg.com/baseui-wc-base-component/dist/with-hyperHTML.min.js"></script>
<script src="https://unpkg.com/baseui-wc-base-component/dist/with-litHTML.min.js"></script>
<script src="https://unpkg.com/baseui-wc-base-component/dist/base-component.min.js"></script>

simple-component-example-and-comparison-using-baseui-wc-base-component.markdown

Simple component example and comparison using baseui-wc-base-component

A Pen by Durga Prasad Sadhanala on CodePen.

License.

style.postcss

body {
    margin: 4rem;
}

header-text-base,
header-text-lit,
header-text-hyper {
    display: block;
    cursor: pointer;
    user-select: none;
}