JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    <p>check the console...</p>
    {{#foo}}
        <widget test='yes'/>
    {{/foo}}
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        foo: { isFoo: true }
    },
    components: {
        widget: Ractive.extend({
            template: '<button on-click=log>click me {{foo}}</button>',
            init: function () {
                this.on( 'log', function ( event ) {
                    var parent, parentKeypath, parentContext;
                    
                    // local context is the component instance's `data` object
                    console.group( 'local context' );
                    console.log( 'event.keypath: "%s"', event.keypath );
                    console.log( 'event.context', event.context );
                    console.log( 'event.context === this.data', event.context === this.data );
                    console.groupEnd();
                    
                    // parent context is `ractive.data.foo`
                    parent = this._parent;
                    parentKeypath = this.component.parentFragment.context;
                    parentContext = parent.get( parentKeypath );
                    
                    console.group( 'parent context' );
                    console.log( 'parentKeypath: "%s"', parentKeypath );
                    console.log( 'parentContext', parentContext );
                    console.log( 'parentContext === parent.data.foo', parentContext === parent.data.foo );
                    console.groupEnd();
                });
            }
        })
    }
});