How can I make Kendo UI Panelbar "skip" an element when reading an HTML list?

Question

I'm using Knockout.js 3.3 and utilizing components with custom elements. I am trying to use Kendo UI's Panelbar with that list. The only problem is, it fails (the nested <ul> won't expand) because my lists are in the following format:

<ul>
    <sidebar-step>
        <li>some message
            <ul>
                <li>some sub message<li>
                <li>another sub message</li>
            <ul>
        </li>
    </sidebar-step>
</ul>

<sidebar-step> is a custom element that contains a template for <li> and a sublist. I'm guessing since <sidebar-step> is not a usual sub-element of <ul>, it is causing it to mess up.

Is there a way to make Kendo UI somehow "ignore" the <sidebar-step> tag?

Edit: if it's not possible, what can I do to make the list expandable (even with this custom element)?

Answer 1

Use the component binding on the outer <li> rather than creating a custom tag.

A minimal example:

<ul>
    <li data-bind="component:'sublist'"></li>
</ul>

Script:

ko.components.register('sublist', {
    viewModel: function(params) {
        this.text = 'something';
        this.subtext = ['one','two'];
    },
    template: '<!-- ko text:text --><!-- /ko --><ul data-bind="foreach:subtext"><li data-bind="text:$data"></li></ul>'
});

ko.applyBindings();

Demo: http://jsfiddle.net/Lohfscdg/