contenteditable="plaintext-only" Now Baseline Newly Available
Developers who need plaintext input often default to a <textarea>, which integrates with forms without extra work. However, the element has limitations that can complicate common use cases.
One such limitation is auto-growing the editing surface with the content. The field-sizing: content CSS property can handle this, but its browser support is still limited. The contenteditable="plaintext-only" attribute value combination solves this by allowing you to set it on a generic element like a <div>, letting the element handle resizing automatically.
Styling is another limitation. The CSS Custom Highlight API, which lets you style arbitrary text ranges by creating them with JavaScript and applying CSS, does not work inside a <textarea>. This is because the element internally uses a <div> in the user agent shadow root. When you apply contenteditable="plaintext-only" on a direct element such as a <div>, the CSS Custom Highlight API works as expected.
A demo from Thomas Steiner illustrates this difference clearly, showing text styling applied in two contenteditable divs but not inside a <textarea>. With this combination of features now Baseline Newly available, this approach offers a more flexible plaintext input path.
