Quill('selection-change') не срабатывает с открытым shadow-root

У меня есть веб компонент в котором используется текстовый редактор Quill. Компонент прекрасно работает когда он находится в Light DOM элемента body.

Но когда содержимое страницы помещается в shadow-root обработчик событий Quill - a не срабатывает. Скажите пожалуйста, как можно решить эту проблему ?

HTML код на картинке.

Подключение Quill.js

<script>
window.onload = function () {
let toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    ['blockquote', 'code-block'],
    [{ 'header': 1 }, { 'header': 2 }], // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
    [{ 'direction': 'rtl' }], // text direction
    [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
    ['clean'] // remove formatting button
  ]
  console.log('this', this)
  let content = document.body.shadowRoot.querySelectorAll('div')
  let quill = new Quill(content[3], {
    modules: {
      toolbar: toolbarOptions
    },
    placeholder: 'Введите сообщение...',
    theme: 'snow'})
  quill.on('selection-change', function (range, oldRange, source) {
    if (range) {
      if (range.length === 0) {
        console.log('User cursor is on', range.index)
      } else {
        var text = quill.getText(range.index, range.length)
        console.log('User has highlighted', text)
      }
    } else {
      console.log('Cursor not in the editor')
    }
  })
}
</script>