stencil-example-component.tsx

import { Component, Prop, State } from '@stencil/core';

@Component({
    tag: 'my-custom-button',
    styleUrl: 'my-custom-button.scss'
})
export class MyCustomButtonComponent {

    @Prop() myCustomAttribute: string;
    @State() checked: boolean;

    toggleChecked(event: UIEvent) {
        this.checked = !this.checked;
    }

    render() {
        return (
            <div onClick={(event: UIEvent) => this.toggleChecked(event)}>
                <span className={(this.checked && "checked")}></span>
                {this.myCustomAttribute}
            </div>
        );
    }
}