<!DOCTYPE html>
<html>
<head>
<script data-require="tinymce@4.4.3" data-semver="4.4.3" src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<my-element></my-element>
</body>
</html>
class MyElement extends HTMLElement {
connectedCallback() {
const textarea = document.createElement('textarea');
const shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(textarea);
tinymce.init({
target: textarea
});
}
// does work without shadow DOM
/*
connectedCallback() {
const textarea = document.createElement('textarea');
this.appendChild(textarea);
tinymce.init({
target: textarea
});
}
*/
}
customElements.define('my-element', MyElement);
Example where TinyMCE throws an exception in postRender
because it cannot find sub-elements that are part of the
shadow DOM. This occurs even when passing in a direct
element to the init() function.
Open console to see exception details