I have a web component that uses the Quill text editor. The component works great when it is in the Light DOM of the body element.
But when the content of the page is placed in the shadow-root event handler Quill - a does not work. Please tell me how to solve this problem?
HTML code in the picture. 
Connecting 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> 