Javascript 在Safari中，contentEditable无法在阴影DOM中工作

我正在尝试构建一个表示contenteditable DIV的简单自定义元素。我想使用

-webkit user modify:read-write-plaintext-only

只允许纯文本。目标浏览器是Safari 10.1

当我将样式

-webkit user modify:read write plaintext only

直接应用于DIV时，它将变为可编辑。我发现这是使用

contenteditable

属性的一个方便的替代方法

例如：

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

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

.编辑{
-webkit用户修改：仅读写明文；
背景：红色；
}
直接元素

但是，当我将上述代码包装到由影子DOM支持的HTML自定义元素中时，DIV不会变得可编辑：

例2：

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)

类PlainTextCell扩展HtmleElement{
构造函数（）{
超级（）
const shadowRoot=this.attachShadow（{mode:'open'}）
//注意：当使用不带阴影DOM的普通元素时，它会起作用：
//const shadowRoot=document.createElement（'div'）
//此.appendChild（shadowRoot）
shadowRoot.innerHTML=`
.编辑{
-webkit用户修改：仅读写明文；
背景：红色；
}
自定义元素
`
此._editor=shadowRoot.querySelector（“.editor”）
//测试：
//此._editor.contentEditable=true//有效
//此._editor.style.webkitUserModify='仅读写明文'//不起作用
}
}
customElements.define（'plain-text-cell'，PlainTextCell）

复制（Safari 10.1）：

---

使用

contenteditable

属性即使在阴影DOM中也可以使用，但我明确希望只允许纯文本，因此需要访问Safari特有的

-webkit用户修改
样式。为什么这不适用于阴影DOM？这是一个Safari bug还是我遗漏了什么？
您应该尝试将
contenteditable
元素属性与
read-write纯文本
CSS值结合起来。它与铬合金配合使用。否则它就是Safari bug，因为它与Chrome（仅使用CSS属性）一起使用。
仅读写明文
即使与
内容可编辑
一起使用也不起作用。我只需要担心Safari/WebKit。我试图找出它是否是一个bug，是否如预期的那样工作，或者（理想情况下）我错过了让它工作的东西。我认为这是一个bug，因为它与Chrome一起工作