search

Juicy / juicy-ace-editor

Custom Element with the Ace code editor
http://juicy.github.io/juicy-ace-editor/
MIT License
93 stars 34 forks source link

Does not work in FireFox #36

Open lastmjs opened 6 years ago

lastmjs commented 6 years ago

Steps to reproduce

Install the editor:

bower install juicy-ace-editor

Create an index.html file, include all of the necessary stuff:

<!DOCTYPE html>

<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js"></script>
        <link rel="import" href="bower_components/juicy-ace-editor/juicy-ace-editor.html">
    </head>

    <body>
        <juicy-ace-editor></juicy-ace-editor>
    </body>
</html>

Run a web server and open up index.html in FireFox. Nothing is displayed. I've noticed this problem throughout the year, I'm just now formalizing the issue.

Expected result

The editor shows up and works

Actual result

The editor does not show up nor does it work

Browsers affected

Screenshot

screenshot from 2017-12-15 12 30 36

screenshot from 2017-12-15 12 30 43

ttretau commented 6 years ago

I think this has to do with the v1 Shadow DOM now in FF. Perhaps this helps: https://github.com/valaxy/ace-shim-about-shadow-dom/

lastmjs commented 6 years ago

I'm not sure that is the issue. FF doesn't have Shadow DOM currently , and I've experienced this problem many months ago as well, when I know FF didn't have Shadow DOM.

https://caniuse.com/#search=shadow%20dom%20v1

ttretau commented 6 years ago

I think this problem comes from polymer shady dom implementation - which is activated in Firefox. If I force to use shady DOM (https://www.polymer-project.org/2.0/docs/polyfills#settings) I see similar problems in Chrome.

lastmjs commented 6 years ago

I see, do you know if it is possible to disable shady Dom?

simonh1000 commented 6 years ago

Is there any solution to get juicy running on Firefox?