Running TinyMCE in a Shadow DOM

Running a TinyMCE instance inside a Shadow DOM is not, currently, supported.

Running a TinyMCE instance — whether in classic mode or inline mode — inside a Shadow DOM will, likely, work.

For example:

<div id="shadow-host"></div>

<script type="text/javascript">

  const shadowHost = document.getElementById('shadow-host');

  // Note: Closed shadow roots are not currently, even experimentally supported.
  const shadow = shadowHost.attachShadow({mode: 'open'});

  const node = document.createElement('textarea');
  node.value = 'Text added to the <em>TinyMCE</em> editor instance <strong>on loading.</strong>';
  shadow.appendChild(node);

  tinymce.init({
    // Note: use ‘target’ to specify the node the TinyMCE editor instance replaces.
    // Do not use ‘selector’.
    target: node,
    plugins: [
        "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
        "help", "image", "insertdatetime", "link", "lists", "media",
        "preview", "searchreplace", "table", "visualblocks",
    ],
    toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",

  });
</script>

But TinyMCE does not, currently, check its host node for evidence it is inside a Shadow DOM (eg, checking for the #shadow-root string immediately before the host node’s opening tag).

Consequently, while a TinyMCE instance will likely work as expected inside a Shadow DOM, TinyMCE instances are not, currently, supported inside Shadow DOMs.