You'd think that the selector .el in

    ".el": {
        "Magento_Ui/js/core/app": {
            "components": .....

would be made available to the ui component.

Instead, it's just thrown away, and the core Magento ui components end up hardcoding .el inside the js files.

For example, check out minicart.phtml, and you can see the following snippet:


    "[data-block='minicart']": {
        "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>


However, [data-block='minicart'] is never made available to the ui component, and instead in minicart.js Magento has hard-coded the selector:

miniCart = $('[data-block=\'minicart\']');

There seem to be many more instances like this in M2 CE 2.1.7..

This seems super strange to me, and is borderline misleading - what's the philosophy behind it?

Additionally, if I want to pass my selector to my ui component, without having to hardcode it - what would be the best way to do that?


It is possible, as for why Magento don't use it themselves I have no idea. It's rare all files follow best practices so don't always rely on them.

I've included an example taken from some work we've done on a quantity selector. Although this isn't using UI Components like your example you should still have access to node.

How to pass the element through to the JS

In your template:

<script type="text/x-magento-init">
        ".js-quantity-selector": {
            "quantity-selector": {

In your JS file:

define(['jquery'], function($) {
    return function (config, node) {


I've gone into a bit more detail about UI Components and their JS on this answer.

  • 1
    After having a chat with Erfan it sounds like this doesn't work inside UI Components, damn it! – Ben Crook Jul 13 '17 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.