It seems I can't access child LWC components while I am using the controller.js from an Aura Template for Record Page. Everything returns back a length of 0. I've tried document.querySelectorAll and this.querySelectorAll as well.

doInit : function(component, event, helper) {
    var components = this.document.querySelectorAll('[data-step-id]');

And the child LWC html

    <div data-step-id="1">
  • This is an X-Y Problem. You may want to ask about your "X" so we can give you useful answers instead the answer I provided, which is accurate but useless to achieving your goals.
    – sfdcfox
    Aug 10, 2020 at 13:48

1 Answer 1


Correct. You cannot get elements within a LWC, as they are blocked by the "shadow DOM". This means that each component is a "black box" with respect to its parent components. The same is also true if you use a LWC within another LWC. You cannot access the internal elements of another component. This is by design.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .