How to adjust lwc lightning-textarea height.

Sometimes you find it very frustrating to set the lightning-textarea component’s height. This task is the most simple one with HTML Textarea; you just set height attribute. However, with lightning-textarea, there is no height attribute; the custom CSS file doesn’t work. How we do it?

It may simple than you thought, we will create a style tag and add it into lightning-textarea.

<template>
    <lightning-textarea value={inputValue}></lightning-textarea>
</template>

import { LightningElement, track } from 'lwc';

export default class LightningTextarea extends LightningElement {
    isrendered = false;
    @track inputValue = "Set Height Sample";
    renderedCallback(){
        if(!this.isrendered){
            this.isrendered = true;
            const styleTag = document.createElement('style');
            styleTag.innerText = "textarea { min-height: 250px; }";

            this.template.querySelector('lightning-textarea').appendChild(styleTag);
        }
        
    }
}