no-host-mutation-in-connected-callback.md

Avoiding host element mutation in connected callback

To ensure consistent behavior in Lightning Web Components (LWC), it is important to avoid mutating the host element within the connectedCallback method. Mutations can lead to unpredictable outcomes and inconsistencies in component behavior.

Rule details

To prevent issues with component lifecycle consistency, avoid mutating the host element in connectedCallback. This includes:

• this.setAttribute
• this.classList.add

Example of incorrect code:

<template>
    <x-child></x-child>
</template>

import { LightningElement, api } from 'lwc';

export default class ExampleComponent extends LightningElement {
    @api condition;

    connectedCallback() {
        this.classList.add(`conditional-class-${this.condition}`);
        this.setAttribute('data-some-attribute', 'value');
    }
}

Example of correct code:

<template>
    <div class="{theClassMyChildNeeds}">
        <x-child></x-child>
    </div>
</template>

export default class Cmp extends LightningElement {
    @api fromOutside;
    get theClassMyChildNeeds() {
        return `my-child-needs-${this.fromOutside}`;
    }
}