Skip to content

# Native web components ​

## Basic usage ​

`vanille` will use native browser features to improve performance as much as possible. The core functionality behind this is to leverage web components.

Import the base web component:

ts

    import { BaseView } from '@vanille/core';

    import { BaseView } from '@vanille/core';

INFO

`BaseView` extends the `HTMLElement` class

Then start building your components:

ts

    import { BaseView, define } from '@vanille/core';

    @define()
    export class Application extends BaseView {
      [...]
    }

    import { BaseView, define } from '@vanille/core';

    @define()
    export class Application extends BaseView {
      [...]
    }

TIP

The decorator `define` is syntactic sugar for:

ts

    const prefix: string = 'v';
    customElements.define(`${prefix}-${application}', Application);

    const prefix: string = 'v';
    customElements.define(`${prefix}-${application}', Application);

Next, start building your UI with in-house JSX:

ts

    import { BaseView, define } from '@vanille/core';

    @define()
    export class Application extends BaseView {
      render() {
        return <div>Hello world!</div>;
      }
    }

    import { BaseView, define } from '@vanille/core';

    @define()
    export class Application extends BaseView {
      render() {
        return <div>Hello world!</div>;
      }
    }

`vanille` comes pack with syntactic sugar decorators, all of which are already sprinkled on the base web component class `BaseView`.

ts

    import {
      define,
      hasJsxTemplate,
      hasObservableProps,
      hasObservableState,
      hasRefs,
      hasShadowDom,
      hasEmit
    } from '@vanille/core';

    import {
      define,
      hasJsxTemplate,
      hasObservableProps,
      hasObservableState,
      hasRefs,
      hasShadowDom,
      hasEmit
    } from '@vanille/core';

More in depth in Decorators.