Quill misbehaves inside of Shadow DOM

[tylerc]

When embedding Quill inside a custom web component that uses the shadow DOM, Quill exhibits a number of odd behaviors:

1. Text cursor moves incorrectly when typing the first couple of characters. In this GIF, I type ABC but it comes out BCA:

   

2. Some styling options in toolbar do not have any effect:

   

3. Also, shortcuts like CTRL+C and CTRL+X for copy/paste do not appear to function at all.

There may be other issues I haven't yet discovered.

Steps for Reproduction

1. Visit https://jsfiddle.net/xgeuda36/
2. Type some things, try the styling buttons, etc.

Expected behavior:

Quill should behave the same whether embedded inside Shadow DOM or not.

Actual behavior:

Quill exhibits cursor, toolbar, and keyboard shortcut issues.

Platforms:

Tested on Chrome 125.0.6422.142 on Windows, and Safari 17.5 on iOS.

Version:

Quill 2.0.2

---

The fiddle to reproduce these issues is very small, it is merely this code:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>

<h1>Quill here:</h1>
<quill-component></quill-component>

<script>
class QuillComponent extends HTMLElement {
  initialized = false;

  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" /><div><div class="quill-inside" style="height: 200px;"></div></div>';
  }
  
  connectedCallback() {
    if (!this.initialized) {
      this.initialized = true;
      new Quill(this.shadowRoot.querySelector('.quill-inside'), {
        theme: "snow",
      });
    }
  }
}

customElements.define('quill-component', QuillComponent);
</script>