8

In my lightning component controller I am unable to use the getElement() function when attempting to access components in the markup. I understand that there is access checking when attempting to use getElement on components not within the same namespace. However, it seems like this should work since the components are in the same namespace (and bundle).

Here is a simple example that illustrates the issue:

Component

<!-- MyComponent.cmp -->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="public">
    <aura:attribute name="recordId" type="Id" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <ui:scrollerWrapper aura:id="myScroller">
        // additional markup here
    </ui:scrollerWrapper>
</aura:component>

Controller:

<!-- MyComponentController.js -->
({
    doInit : function(component,event,helper) {
        var scroller = component.find('myScroller').getElement();
    }
})

Error:

Uncaught Action failed: c$MyComponent$controller$doInit [component.find(...).getElement is not a function]

Additional Info:

  • The error occurs when the Component is added to a record page, or when it is added directly to an app, using the Lightning App Builder.
  • This error is not limited to the ui:scrollerWrapper. It occurs any time getElement() is called on a component.
  • This error does not occur if the Component is created within a Visualforce page.
  • This error does not occur when Locker Service is turned off.
  • This org is on Winter '17.

Thanks in advance for any help.

0
7

See this post for more information

Why do some lightning components have more methods / properties than others

and this is by design to enforce component encapsulation - same reason SecureComponentRef does not expose .find() - cmp.find("foo").getElement() is an anti pattern (one component reaching into the internal details of another) that Lightning Framework has been looking to block for many years. The only public facing API for a component is supposed to be its attributes, methods and events.

There has definitely been some discussion on if this should be more like the way the secure virtual DOM works where you have direct, non encapsulated, unstructured, etc access to anything in your namespace. We do this for the svDOM primarily because of existing Javascript libraries that only work at the direct DOM level.

Looking at your specific example that is not the case - you do not own ui:scrollerWrapper and its not in your namespace. Your code is attempting to drill into the internals of another and if it was allowed to do this would then be creating an unmaintainable implicit dependency that the author of ui:scrollerWrapper has not signed up to support.

I cannot explain "This error does not occur if the Component is created within a Visualforce page" - if Locker is enabled it should be in effect even for LC4VF.

6
  • Thanks for the answer Doug. It finally clicked for me that the ui:scrollwrapper isn't in my namespace, it's in the ui namespace. I was just thinking of the fact that it was in my component.
    – Clint Lee
    Oct 13 '16 at 22:20
  • 1
    There are still some references to cmp.find().getElement() in the Lightning Component Developers Guide so I wasn't aware that this was an anti-pattern. What I'm really trying to do is set the scrollTop attribute on a ui:scrollerWrapper, but since scrollTop isn't an exposed attribute it doesn't seem possible. Is there a best practice for solving issues where it's sometimes necessary to access an attribute like this?
    – Clint Lee
    Oct 13 '16 at 22:26
  • Only HTML components (<div> is actually <aura:html tag="div"> under the covers) grant you ownership/access to the underlying element they manage because they represent syntactic markup sugar for document.createElement() calls. This component is specifically designed to support this. Components represent an API with support and versioning contracts and the only way to insure backward compatability is to have both producer and consumer agree to that contract. The component author needs to enhance the feature set. Oct 14 '16 at 11:05
  • Hi @DougChasman , Can you please take a look at Unable to add custom scroll due to “component/namespace encapsulation” when Locker Service is active
    – SE_User
    Dec 6 '16 at 12:27
  • Hi @DougChasman Is this a bug? The above question? No updates regarding the scroll functionality! Unable to add custom scroll due to “component/namespace encapsulation” when Locker Service is active
    – SE_User
    Dec 9 '16 at 6:50

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.