How to access custom element in a Knockout component?

Question

Take a look at this scenario :

ko.components.register('hello', {
     viewModel: function() { },
     template: "<h1>hello wrold</h1>"
});

If I use <hello></hello> the generated html result will be:

<hello><h1>hello world</h1></hello>

But what if I want this:

<hello class="hello"><h1>hello world</h1></hello>

Then how can I get a reference to the custom element tag in a component?

Answer 1

The custom element contains the component, it is not considered part of it. Just like the outer tag used in a foreach, template or with binding. If you want to style that tag, you have to add the bindings to style it. The component will fill its contents.

<hello data-bind="css: 'hello'"></hello>

---

However if you absolutely wanted to access the parent element, I suppose it's possible but I would not recommend it. The component should only be concerned with itself, not the container that contains it. This can (and will) cause problems if the element had any child nodes that also had bindings.

Use a factory function for your view model. It will have access to the component's info (which currently only includes the containing element element)

ko.components.register('hello', {
    viewModel: {
        createViewModel: function (params, componentInfo) {
            var element = componentInfo.element;
            ko.applyBindingsToNode(element, { css: 'hello' });
            return {};
        }
    },
    template: "<h1>hello world</h1>"
});