Get child element and set it position: fixed

Question

Still pretty new to LWC and trying to understand the communication between parent/child and how to create logic to it.

So, the goal here is to have the child component with position: fixed when you start scrolling the page until it reaches a certain point, where it is set to position: relative

I've set a class to the child component and I'm calling it within the parent, but I'm seeing a "SecureElement: [object HTMLElement]{ key: {"namespace":"c"} }"

This is due to the Locker service and here's my doubt...the logic should be done in a window scroll event, how to select the child component by class and change it's position?

Here's the HTML:

<div class="col">    
    <c-detail-gallery
       class="product-gallery">
    </c-detail-gallery>
</div>

The JS to select it:

stickyProductGallery() {
    setTimeout(() => {
        let productGallery = this.template.querySelector('.product-gallery');
        console.log('product gallery element' + productGallery);
    }, 3000);
}

Answer 1

I don't fully understand what you're trying to do, but it sounds like your parent LWC needs to control something in your child LWC.

As per the docs, to pass data down to the child you need to expose a property on the child and pass the data down.

e.g.

in you child detailGallery.js component, you could have:

@api position;

get propertyClass() {
    return `${this.position === 'relative' ? 'slds-is-relative' : 'slds-is-absolute'}`;
}

and in your detailGallery.html, you could have:

<div class={propertyClass}>
    your content goes here
</div>

i.e. Given your parent LWC has the knowledge of when to be relative/absolute, it needs to tell your child LWC. It can't reach into the child like you're trying to do, so the child needs to expose a parameter that understands what to do with this information and how it will make itself relative/absolute