Magento 2 bind ko scope to a non-html/virtual element

Question

I want to bind customer scope to a non-html element as I do not want html to be loaded if customer is not logged in. In the OOTB magento inside vendor/magento/module-theme/view/frontend/templates/html/header.phtml li tag is loaded even if customer is not logged in. Visually the li is hidden in this case but the accessibility screen reader reads it.

I want to bind a scope to a non-html element so that I can write a condition something like below.

<!-- ko scope: customer -->
        <!-- ko if: customer().fullname  -->
        <li class="greet welcome">
            <span class="logged-in"
                  data-bind="text: new String('<?= $block->escapeHtml(__('Welcome, %1!', '%1')) ?>').replace('%1', customer().fullname)">
            </span>
        </li>    
        <!-- /ko -->
    <!-- /ko -->

But scope is not bound.

knockout.js:3381 Uncaught ReferenceError: Unable to process binding "if: function(){return customer().firstname }"
Message: customer is not defined.

Any other way to achieve this?

Answer 1

For scope you should use a String. Try:

<!-- ko scope: 'customer' -->