为什么我无法访问 Javascript 中新添加的元素（模式弹出窗口），即使在开发者控制台中也是如此？

Question

I'm probably missing something obvious here but I'm pretty experienced with html and javascript and this is throwing me. I'm writing a browser plugin for Salesforce Lightning users. I want to get access to the form fields in the New Contact screen. My script wasn't working and when I drilled down I found the issue and I can reproduce it just in the dev tools:

I log into Salesforce, click Contact, then New. A New Contact window pops up.

I right click on a form field (eg phone number input) and click Inspect. I can see the ID of the element, eg "input-169"

 <input type="text" id="input-169" maxlength="40" name="MobilePhone" class="slds-input">

I go to the console and type in

 document.getElementById('input-169');

The return value is null.

If I do this for an element that was already there before the New Contact popup window, it works fine.

If I try other ways to find the element, for example document.getElementsByTagName(), it does not show up that way either, but other elements that were there before the popup window all work.

If I add my own element next to the one I want (ie at the same DOM level) by editing the html, I can access that new element successfully, but still not access the one that was added by the popup window.

I can reproduce this in Safari, Chrome, and Firefox.

What's going on and is there any way to tell the browser to notice the elements in the popup window?

Answer 1

The Salesforce.com Lightning interface is using custom elements and the Shadow Dom to build its UI. To access the invisible elements you need to use the shadowRoot property of the custom elements.