webcomponents / webcomponents.org

Home of the web components community
https://www.webcomponents.org
Apache License 2.0
359 stars 95 forks source link

Different behaviour between Firefox and Chromium #1273

Open CatsMum opened 4 years ago

CatsMum commented 4 years ago

When running on Firefox 73.0b8 on Linux, I encounter a "NotSupportedError" at @polymer/polymer/lib/mixins/element-mixin.js version 3.3.1 in _attachDom. The line in question reads:

n.attachShadow({mode: 'open', shadyUpgradeFragment: dom});

The error occurs because n is a FORM element which has no shadow DOM. Chrome 79.0.3945.130 executes this without problem.

Setting a breakpoint at this line reveals a difference between the two browsers in how this function is called:

Firefox:

  1. n = A FORM element No further calls

Chromium:

  1. n = paper-button
  2. n = paper-button
  3. n = iron-ally-announcer
  4. n = iron-ally-announcer
  5. n = paper-input
  6. n = paper-input
  7. n = ... (I cannot decipher what the object is)
  8. n = ... (I cannot decipher what the object is)
  9. n = iron-input
  10. n = iron-input

The HTML being executed is as follows:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="/favicon.ico" type="image/png" />
        <title>configurator- Log in</title>

        <link rel="stylesheet" type="text/css" href="/public/stylesheets/style.css">
        <script nonce='d8c9ef6060da432f9a21d440196fa3e17adb185464944bb93fdd1809e02fa1' type="module">
            import('@polymer/iron-form/iron-form.js');
            import('@polymer/paper-input/paper-input.js');
            import('@polymer/paper-button/paper-button.js');
        </script>
        <meta charset="UTF-8">
    </head>
    <body>
       <header>
            <a href="/" class="logo"><img src="/images/logo.gif" alt="Logo"></a>
            <div>
                <h1>Router</h1>
                <h2>Log in</h2>
            </div>
    </header>
    <menu>
        <p><a href="/">Home</a></p>
        <p>Log in</p>
    </menu>
        <section id="_content">
            <div id="_flashes" class="flashes">
            </div>
            <form is="iron-form" allow-redirect method="post" id="_form" action="/login">
                <input type="hidden" name="_csrf" value="iNg6gJDo-k61QJuGnqA8DjEKttgFS6qyUGgo">
                <paper-input type="password" name="password" label="Password"></paper-input>
                <paper-button raised onclick="submitForm()">Log In</paper-button>
            </form>
            <script>
                function submitForm(e) {
                    document.getElementById("_form").submit();
                }
            </script>
        </section>
        <footer>
            Configurator version . &copy;2018
        </footer>
    </body>
</html>