@b-side/base-element

Function to wrap javascript custom-element using @b-side/html-renderer as HTML engine

Usage no npm install needed!

<script type="module">
  import bSideBaseElement from 'https://cdn.skypack.dev/@b-side/base-element';
</script>

README

@b-side/base-element

Javascript

import { Element } from '@b-side/base-element';

export class ClassName extends Element() {
    constructor() {
        super();

        this.text_in_HTML = 'Hello World';
    }

    connected() {
        // called when adopted or transfered in a document
    }

    disconnected() {
        // called whenever disconnected from document
    }
}

HTML

<p>
    {{ text_in_HTML }}
</p>
<bs-for (x in [0, 1, 2, 3])>
    <bs-if (x  % 2)>{{ x }}</bs-if>
</bs-for>

Result

Hello World

1
3