Question

我正在尝试构建一个代表可信任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>

但是，当我将上面的代码包装到由shadow 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)

要重现（Safari 10.1）：http://jsbin.com/vugihetiqo/2/edit?html,js,output

使用contenteditable属性甚至可以使用shadow DOM，但我明确地希望只允许纯文本，因此我需要访问Safari特定的-webkit-user-modify样式。为什么这不适用于shadow DOM？这是一个Safari bug还是我错过了什么？

contentEditable在Safari中的Shadow DOM内部无法正常工作

0 个答案: