TinyMCE 4.9.x still not work in shadow dom. Is there any ideas how to solve it?

Question

I try to initialize tinyMCE to element, which placed in shadowDOM. (polymer web-components), but it's not work.

The same example of situation i found here: https://embed.plnkr.co/WXtcz2GUpOhgrhWBTcAW/

Do you have any ideas, how to initialize tinyMCE 4.9.3 for element in shadowDOM? (test on FireFox 65.0.2, Chrome 72.0.3626.121)

Answer 1

1. Put the TinyMCE <textarea> in the light DOM.

2. Insert it in the Shadow DOM by the help of a <slot> element.

class MyElement extends HTMLElement {
  connectedCallback() {
    const textarea = document.createElement('textarea')
    this.appendChild(textarea)
    this.attachShadow({ mode: 'open' })
        .innerHTML=`<style>
                :host { outline: 5px solid blue ; display: inline-block }
            </style>
            <slot></slot>`
    tinymce.init({
      target: textarea
    })
  }  
}

customElements.define('my-element', MyElement)

<script data-require="[email protected]" data-semver="4.4.3" src="https://cdn.tinymce.com/4/tinymce.min.js"></script>

<my-element></my-element>