nativeweb

Tiny library for simple web components.
_1kB

import { component, property, Element } from 'nativeweb';

@component('hey-internet')
class Component extends Element {
    @property() emoji;

    render() {
        return `
            <h1>Hey Internet ${this.emoji}</h1>
        `;
    }
}

<hey-internet emoji="👋"></hey-internet>

Native web components

Encapsulated styles and scripts

Simplified with decorators

Tiny footprint

One command to start

npm init nativeweb

Or add to your existing project

npm install nativeweb

Decorators

@component

@property

@event

@customEvent

@query

@queryAll

@component

Define a custom element and add styles. From an external file or the same file. styles can be an array of styles.

import { component, Element } from 'nativeweb';
import styles from './hey-styles.css.js';

@component('some-styles', styles)
class Component extends Element {
    render() {
        return `
            <h1>Some Styles</h1>
        `;
    }
}

import { css } from 'nativeweb';

export default css`
    h1 {
        color: orange;
    }
`;

<hey-styles></hey-styles>

@property

Get an attribute converted to the specified type or define a property with an optional default value.
String, Boolean, Number, Array or Object.

import { component, property, Element } from 'nativeweb';

@component('cool-property')
class Component extends Element {
    @property() cool = 'Cool Prop';
    @property(String) title = 'Default Title';
    @property(Number) multiplier;

    render() {
        return `
            <h1>${this.title}</h1>
            <h2>${this.cool} ➡️ ${2 * this.multiplier}</h2>
        `;
    }
}

<cool-property title="Cool Title 🤙" multiplier="3"></cool-property>

@event

Add an event listener to a component, a child element named @name or an external component event.

import { component, event, Element } from 'nativeweb';

@component('easy-event')
class Component extends Element {
    @event() mouseenter = this.onHover();
    @event() click = {
        '@title': this.onClick(),
        '@button': this.onClick()
    };
    @event() ready = {
        'other-component': this.onReady()
    };

    onHover() {
        console.log('Hover Component');
    }
    onClick(e) {
        console.log(e.currentTarget);
    }
    onReady({ detail }) {
        console.log(detail);
    }

    render() {
        return `
            <h1 @title>Easy Event</h1>
            <button @button>Click Me</button>
        `;
    }
}

<easy-event></easy-event>

@customEvent

Create a custom global event, namespaced with the component name. Ready to be dispatched. The listener is in the component above.

import { component, customEvent, Element } from 'nativeweb';

@component('other-component')
class Component extends Element {
    @customEvent() ready = 'Ready 🚀';

    connected() {
        dispatchEvent(this.ready);
    }

    render() {
        return `
            <h1>Other Component</h1>
        `;
    }
}

<other-component></other-component>

@query

Query selector an @name child element.

import { component, query, Element } from 'nativeweb';

@component('simple-query')
class Component extends Element {
    @query() title;

    connected() {
        this.title.innerText = 'Better Title 💯';
    }

    render() {
        return `
            <h1 @title>Good Title</h1>
        `;
    }
}

<simple-query></simple-query>

@queryAll

Query selector all @name child elements.

import { component, queryAll, Element } from 'nativeweb';

@component('all-query')
class Component extends Element {
    @queryAll() title;

    connected() {
        this.title.forEach(el => (el.style.color = 'lightgreen'));
    }

    render() {
        return `
            <h1 @title>One Title</h1>
            <h2 @title>Other Title</h2>
        `;
    }
}

<all-query></all-query>

Lifecycle

render()   →   Renders the component.

connected()   →   Called when the component is inserted in the DOM.

disconnected()   →   Called when the component is removed from the DOM.

adopted()   →   Called when the component is moved to a new document.

attributeChanged()   →   Called when an observed attribute changes.

Methods

this.update()   →   Rerenders the component.

Properties

this.properties   →   Get all attributes.

Tips

Shared style

Composition

Conditional

Loop

Variable element

Shared style

Include global styles in a component.

import { css } from 'nativeweb';
import global from '../global-style.css.js';

export default [
    global,
    css`
        h1 {
            color: orange;
        }
    `
];

Composition

Component composition with default slot and named slot.

import { component, Element } from 'nativeweb';

@component('slot-example')
class Component extends Element {
    render() {
        return `
            <header>
                <h1><slot name="title"></slot></h1>
                <slot></slot>
            </header>
        `;
    }
}

<slot-example>
    <span slot="title">Named slot</span>
    <p>Default slot</p>
</slot-example>

Conditional

Conditional rendering in vanilla JS.

import { component, property, Element } from 'nativeweb';

@component('condition-example')
class Component extends Element {
    @property() isGood = false;

    render() {
        return `
            ${this.isGood ? `<h1>Good</h1>` : ``}
        `;
    }
}

Loop

Render loop in vanilla JS.

import { component, property, Element } from 'nativeweb';

@component('loop-example')
class Component extends Element {
    @property() emojis = ['🤳', '🧨', '🧱'];

    render() {
        return `
            ${this.emojis.map(item => `<span>${item}</span>`).join('')}
        `;
    }
}

Variable element

Render an element from a property.

import { component, property, Element } from 'nativeweb';

@component('element-example')
class Component extends Element {
    @property() as = 'p';

    render() {
        return `
            <${this.as}>Heading 1</${this.as}>
        `;
    }
}

<element-example as="h1"></element-example>