Shadow dom changes behavior of hidden attribute compared to shady dom

19 views

Skip to first unread message

paul.ge...@gmail.com

unread,

Jul 11, 2016, 11:35:09 AM7/11/16

to Polymer

I have been working with Dodson's example overlay code from polycast 47 and hitting weird problems. I finally tracked it down: shadow dom vs shady dom.

Consider this element:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">

<dom-module id="hide-test-app">
  <template>
    <style>
      :host {
        display: block;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #FFF;
      }
    </style>
    <paper-button on-tap="work" raised>Press me</paper-button>
    <div class="overlay" hidden$="[[!working]]">
      I am the overlay.
    </div>
  </template>

  <script>
    Polymer({

      is: 'hide-test-app',

      properties: {
        working: {
          type: Boolean,
          value: false
        },
      },

      work: function() {
        this.working = true;
      }

    });
  </script>
</dom-module>

Which is loaded in a very simple wrapper:

<!doctype html>

<html>
  <head>
    <title>hide-test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="/manifest.json">
    <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="/src/hide-test-app/hide-test-app.html">
  </head>
  <body>
    <hide-test-app></hide-test-app>
  </body>
</html>

Click the button, see the overlay. No problem.

However, reload the page with ?dom=shadow (or set the global polymer flag before loading webcomponents-lite), and the overlay is shown first, even though "working" is false.

I am not completely fluent in the shadow/shady dom features, and so it was not clear to me if this is a defect or a grave misunderstanding on my part: hence, my posting here rather than opening an issue on github. What do you think, reader? Is this a defect that should be filed on github, or a defect in my understanding?

This was all tested on Chrome Version 51.0.2704.106 (64-bit) for Linux, in case that's relevant.

Reply all

Reply to author

Forward

0 new messages