element-vir/dist/readme-examples/my-with-event-listening.element.js

Heroic. Reactive. Declarative. Type safe. Web components without compromise.

import { defineElement } from 'element-vir';
import { html, listen } from '../index.js';
import { MyWithEvents } from './my-with-events.element.js';
export const MyWithEventListening = defineElement()({
    tagName: 'my-with-event-listening',
    state() {
        return {
            myNumber: -1,
        };
    },
    render({ state, updateState }) {
        return html `
            <h1>My App</h1>
            <${MyWithEvents}
                ${listen(MyWithEvents.events.logoutClick, () => {
            console.info('logout triggered');
        })}
                ${listen(MyWithEvents.events.randomNumber, (event) => {
            updateState({ myNumber: event.detail });
        })}
            ></${MyWithEvents}>
            <span>${state.myNumber}</span>
        `;
    },
});