How can i make custom Polymer element hidden?

dart, dart-polymer

Solution

Add the following style to your polymer elements:

<polymer-element name="tute-stopwatch">
  <template>
    <style>
      /* old style for current Dartium */
      @host {
        * {
          display: inline-block;
          position: relative;
          overflow: hidden;
        }

        [hidden], .hidden {
          display: none;
        }
      }

      /* new style for Chromium */
      :host {
        display: inline-block;
        position: relative;
        overflow: hidden;
      }

      :host([hidden]:host, .hidden:host) {
        display: none;
      }
    </style>

    <button>xxx</button>
    ...

  <template>
  <script type="application/dart" src='toute-stopwatch.dart'></script>
</polymer-element>

The you can make the element visible/hidden by setting the `hidden` attribute or add/remove the class `hidden`.

Problem

For experiments I use the custom element tute-stopwatch from https://www.dartlang.org/docs/tutorials/polymer-intro/ When I set the attribute '.hidden = true' for buttons, these buttons hide successfully, but the element `tute-stopwatch` doesn't. ``` void addChild(Event e, var detail, Node target) { .. stopButton.hidden = true; startButton.hidden = true; resetButton.hidden = true; this.hidden = true; } ``` When i use subtemplate in tute_stop_watch.html: ``` <template if="{{ visible }}" id="innerTemplate"> ``` and in tute_stop_watch.dart: ``` void enteredView() { super.enteredView(); startButton = $['startButton']; // $['startButton'] == null innerTemplate =$['innerTemplate'] // find correct, but innerTemplate.childNodes == [] ``` I try make element with all abilities tute-stopwatch visible on demand.

Original source