Placeholder text along with some other text in textarea

Question

I am trying to show some text in normal font along with placeholder (like below image) as a default in a textarea box.

Since, I don't think it is possible to have both placeholder and other text string at the same time(not absolutely sure though), I am thinking to show text with look and feel of placeholder by applying some css.

Since, text area accepts any input as string, I am unable to add any css to text. I have tried with innerHtml but it does not help.

.html file

<textarea class=" abc slds-textarea" name="textareafield"></textarea>

.js file

this.template.querySelector('.abc').innerHTML = '<b>sample</b>';

I have also tried with <div contenteditable="true"></div> and html does get applied but since look and feel of the div is different than textarea, I cannot use this as solution.

Answer 1

I end up using <div contenteditable> and applying bunch of css to make it look like textarea.

.html file

<div id="divcontenteditable" class="divTextarea slds-textarea" contenteditable 
onkeyup={handleChange} lwc:dom="manual"></div>

.js file

let divTextarea = this.template.querySelector('.divTextarea');
divTextarea.innerHTML = '<p>default line 1</p>'+'<p style="color:grey">default line 2</p>';

.css file

.divTextarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    overflow: auto;
    -ms-overflow-y: scroll;
    padding: 0.5rem 0.75rem;
    resize: vertical;
    width: 100%;
    height: 90px;
    min-height:90px;
}