polymer-quill doesn't work in Shadow DOM

[abdonrd]

You can try:

https://chuckh.github.io/polymer-quill/components/polymer-quill/demo/index.html?dom=shadow

https://chuckh.github.io/polymer-quill/components/polymer-quill/demo/bubble.html?dom=shadow

[platoscave]

+1
The funny thing is, I initially get a layout that is messed up (below). When I click on one of the radio buttons it turns back to normal. I'm using chrome v55.

[chuckh]

Currently Quilljs does not work with Shadow DOM. Will give it another try with Shadow DOM when porting to Polymer 2.0.

See issue for more information: slab/quill#904

[satyanath]

I have a working hack. I had to modify both quill and the polymer-quill to get it working. As mentioned this is a hack and definitely not suitable for production use. As I have very little free time I could not do a pull request. I am attaching the files which I modified. If you find the hack suitable you can use it to modify the code and get it working in shadowDom.

To summarize the changes are as follows

Quill.js

1. Modified to not run the factory function at the beginning and save that function in a variable.
2. Added an argument qComponent to store the component (rather shadowRoot) of the component.
3. Pass the qComponent to the other objects called where quill is not passed.
4. Modify the places where document is used (leaving out places where createElement is called) to use qComponent instead.

Polymer-quill

1. Moved to the code from ready routine to attached (this step may not be necessary).
2. Modified the styles in polymer-quill-styles-snow.html to remove :host and ::content
3. Modified to call the saved factory function first and then call the Quill function. The quill function is now called with the component reference.

I have used it in my project and it is getting tested along with other things. Please do a diff to find out all the changes. Review and only then include the changes appropriately.
pquill.zip

This can be modified to work both with shady DOM and shadow DOM. I just needed only shadow DOM for my project.

Hope this is of some use.
pquill.zip

[satyanath]

Thanks. Hope it gets into the main code base. I had only did it as a hack - so you may have to improve the code before you put it in. Regards, S.Satyanath

…

On 30-06-2017 09:28, Alexis Hernandez wrote: @satyanath <https://github.com/satyanath> Nice mod! It's working! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFQiA-RCEpQyXrEyrzD9Ddzkr5JZVNNXks5sJHJ8gaJpZM4L9ZMA>.

[Asha-N]

satyanath sir,
This hack works only for chrome. How to make it work for IE and firefox ?

This is how it looks on firefox and IE browsers :

[satyanath]

Hi Asha-N, IE and Firefox do not support Shadow DOM. Hence you cannot use this hack there. You will have to modify to code to not apply the hack when you detect IE and Firefox. Hope this helps. Regards, S.Satyanath

…

On 13-07-2017 17:29, Asha-N wrote: satyanath sir, This hack works only for chrome. How to make it work for IE and firefox ? This is how it looks on firefox and IE browsers : image <https://user-images.githubusercontent.com/28390751/28165237-9ce8120e-67f0-11e7-99f0-4a73ddda70ae.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFQiA0jePgL6GnW4fZaWiqFDvnbQEytSks5sNgaZgaJpZM4L9ZMA>.

[abdonrd]

Closing and old issue.