JSFiddle - React, Tailwind, and code Playground

JavaScript

enyo.kind({
    name: "MySample",
    kind: "FittableRows",
    components: [
        {onCustomEvent: "customEvent", onFoo:"foo", name:"control1", components: [
            {onCustomEvent: "onFoo", name:"control2", components: [
                {kind:"Button", content:"fire", ontap:"fireCustonEvent"}
            ]}
        ]},
        {kind:"enyo.Scroller", fit:true, components: [
            {name:"console", allowHtml:true}
        ]}
    ],
    log: function(s) {
        this.$.console.addContent(s + "<br>");
    },
    fireCustonEvent: function() {
        this.$.button.bubble("onCustomEvent");
    },
    customEvent: function(inSender) {
        this.log("customEvent: expected");
    },
    onFoo: function(inSender) {
        this.log("onFoo: expected but never called");
    },
    foo: function(inSender) {
        this.log("foo: not expected!");
    },
    dispatchEvent: function(inEventName, inEvent) {
        this.inherited(arguments);
        if (inEvent.type != "mousemove" && inEvent.type != "move" && inEvent.type != "enter" && inEvent.type != "leave" && inEvent.type != "mouseover" && inEvent.type != "mouseout") {
            this.log("[dispatch] " + inEventName + ", " + inEvent.type);
        }
    }
});

new MySample({fit:true}).write();