<style>
  .editor {
       -webkit-user-modify:read-write-plaintext-only;
       background:red;
}
</style>

<div class="plain-text-cell editor" >Direct element</div>

class PlainTextCell extends HTMLElement {
    constructor() {
        super()

        const shadowRoot =  this.attachShadow({mode:'open'})

        // Note: it works when using plain elements without the shadow DOM:
        //const shadowRoot = document.createElement('div')
        //this.appendChild(shadowRoot)

        shadowRoot.innerHTML = `
            <style>
                .editor {
                    -webkit-user-modify:read-write-plaintext-only;
                    background:red;
                }
            </style>

            <div class="plain-text-cell editor">Custom element</div>
        `

        this._editor = shadowRoot.querySelector('.editor')

        // Test:
        //this._editor.contentEditable = true // Works
        //this._editor.style.webkitUserModify = 'read-write-plaintext-only' // Does not work
    }
}

customElements.define('plain-text-cell', PlainTextCell)