LWC Playground: DOM manipulation with CSS versus if:true/false

app.css

.contentHidden {
    display: none;
}

app.html

<template>
    <div data-id="A">This is the div</div>
    <lightning-button onclick={handleClickHide} label="Hide"></lightning-button>
    <lightning-button onclick={handleClickShow} label="Show"></lightning-button>

    <br>
    <div if:true={show}>Toggle div</div>
    <lightning-button label="Toggle" onclick={handleToggle}></lightning-button>
</template>

app.js

import { LightningElement} from 'lwc';

export default class App extends LightningElement {

    show = true;

    handleClickHide(){
        const selector = 'A';

        const theDiv = this.template.querySelector('[data-id="' +selector+ '"]');
        theDiv.className = 'contentHidden';
    }
    handleClickShow(){
        const selector = 'A';

        const theDiv = this.template.querySelector('[data-id="' +selector+ '"]');
        theDiv.className = '';
    }

    handleToggle(){
        this.show = !this.show;
    }
}