Access DOM of managed custom aura component

lightning-aura-componentslightning-lockermanaged-package

I need to use javascript/jquery to click a button on a managed custom aura component when the page loads. Its managed so I can't edit the component code.

I can add the Javascript to the page using "Edit Head Markup" in the Experience Builder.

The Lightning Locker DOM protection is not allowing me to get the element I need to trigger a click.

Is there any way around this?

Best Answer

The solution was to use the x-oasis-script html tag that disables the shadow dom. I added style="display:none" otherwise the code shows when the page is loading.

I had to use a setTimeout to wait for the page to load completely because the components I needed to access were not fully loaded when the dom or window were loaded, but I'm sure is a better wait to wait for an element to load.

<x-oasis-script style="display:none">
window.addEventListener('load', function () {
  setTimeout(() => {  
        
var clickEvent = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false
});

element=document.querySelector('a[title="XXX"]');
element.dispatchEvent(clickEvent);

}, 2000);
});
    
</x-oasis-script>
Related Topic