LWC: Using lwc:dom="manual" to reach and interact with a certain DOM element

Question

I am trying to find a way to interact with the built-in chat widget. I need to simulate a click on it.

I understand that the Locker Service is there to prevent any interaction outside of the DOM of the LWC component. Yet I am trying to see if there's a way around it.

I read about lwc:dom="manual" so I decided to give it a try.

HTML:

<template>
    <div lwc:dom="manual"></div>
</template>

JS:

import { LightningElement, api } from 'lwc';

export default class ChatButtonTest extends LightningElement {

    renderedCallback() {
        console.log(document.getElementsByClassName('flatButton');
    }
}

This results in a Proxy object that contains the button in question.

However when I try to interact with it it comes back as undefined. For instance console.log(document.getElementsByClassName('flatButton')[0]; prints as undefined in the console.

Is there no way to interact with the result of the DOM selection because it comes back as a Proxy object or am I trying to access it incorrectly?

Answer 1

In LWC it is allowed only to access the component inside your template.

For example, if you have button inside the HTML template of your LWC component,

<template>
    <button class="flatButton"></button>
    <div lwc:dom="manual"></div>
</template>

you should be able to access this button in your javascript

import { LightningElement, api } from 'lwc';

export default class ChatButtonTest extends LightningElement {

    connectedCallback() {
        console.log(this.template.querySelector('button.flatButton'));
    }
}

You cannot access the elements which do not belong to your component template.