JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="view">
    <div>viewModel content:
        <span data-bind="text:data"></span>
    </div>
    <div data-bind="customComponent:true"></div>
</div>

JavaScript

ko.bindingHandlers.allowBindings = {
    init: function (elem, valueAccessor) {
        // Let bindings proceed as normal *only if* my value is false
        var shouldAllowBindings = ko.unwrap(valueAccessor());
        return { controlsDescendantBindings: false };
    }
};

ko.bindingHandlers.customComponent = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            // Append new element
            var $component = $('<div>customComponent content: <span data-bind="text:data"></span><div>').appendTo($(element));
            // Apply bindings on newly created element
            console.log('2.A. customComponent -> applyBindings -> started');
            var childBindingContext = bindingContext.createChildContext({
                data: 'COMPONENT MODEL DATA'
            });
            ko.applyBindingsToDescendants(childBindingContext, element);
            console.log('2.A. customComponent -> applyBindings -> completed');
            return { controlsDescendantBindings: true };
        }
};

console.log('1.A. view -> applyBindings -> started');
ko.applyBindings({
    data: 'VIEW MODEL DAjhjhTA'
}, $('#view')[0]);
console.log('1.B. view -> applyBindings -> completed');