In version: v2.0-beta.1 -- Uncaught TypeError: Cannot read property 'length' of

[jamesmgg]

Hello, the paper-stepper sort of works, though I'm getting the exception below when using the paper stepper. When I say it sort of works, is that it looks like the image below. Clicking through it works, but it's not styled properly.

Uncaught TypeError: Cannot read property 'length' of undefinedPolymer.IronA11yKeysBehavior._unlistenKeyEventListeners @ iron-a11y-keys-behavior.html:414Polymer.IronA11yKeysBehavior.detached @ iron-a11y-keys-behavior.html:302Polymer.Base._addFeature._invokeBehavior @ polymer-micro.html:414Polymer.Base._addFeature._doBehavior @ polymer-micro.html:407Polymer.Base.detachedCallback @ polymer-micro.html:217DomApi.(anonymous function) @ polymer-mini.html:1245(anonymous function) @ paper-stepper.html:91Polymer.ready @ paper-stepper.html:90Polymer.Base._addFeature._invokeBehavior @ polymer-micro.html:414Polymer.Base._addFeature._doBehavior @ polymer-micro.html:409Polymer.Base._addFeature._readySelf @ polymer-mini.html:89Polymer.Base._addFeature._ready @ polymer-mini.html:76Polymer.Base._addFeature._readyClients @ polymer-mini.html:83Polymer.Base._addFeature._ready @ polymer-mini.html:71Polymer.Base._addFeature._readyClients @ polymer-mini.html:83Polymer.Base._addFeature._ready @ polymer-mini.html:71Polymer.Base._addFeature._tryReady @ polymer-mini.html:61Polymer.Base._addFeature._initFeatures @ polymer.html:3576Polymer.Base.createdCallback @ polymer-micro.html:194

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../bower_components/paper-stepper/paper-stepper.html">
<link rel="import" href="../bower_components/paper-stepper/paper-step.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-textarea.html">

<dom-module id="candid-apps">

  <template>

    <style>
      :host {
        display: block;
        padding: 10px;
      }
      .card {
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        padding: 16px;
        margin: 24px;
        border-radius: 5px;
        background-color: #fff;
        color: #757575;
      }
      .circle {
        display: inline-block;
        height: 64px;
        width: 64px;
        border-radius: 50%;
        background: #ddd;
        line-height: 64px;
        font-size: 30px;
        color: #555;
        text-align: center;
      }
      h1 {
        font-size: 22px;
        margin: 16px 0;
        color: #212121;
      }

      .toolbar {
        position: relative;
        padding: 8px;
        background-color: white;
        z-index: 12;
      }
      neon-animatable {
        height:500px;
      }

    </style>

    <div class="toolbar">
        <button on-click="_onPrevClick">&#8678;</button>
        <button on-click="_onNextClick">&#8680;</button>
    </div>

    <paper-stepper>
      <paper-step label="Create an account" summarize="Summarize if needed">
        <form is="iron-form" method="post" action="/">
          <paper-input label="Pseudo"></paper-input>
          <paper-input type="password" label="Password"></paper-input>
          <paper-input type="password" label="Confirm password"></paper-input>
        </form>
      </paper-step>
      <paper-step label="Enter personal informations">
        <paper-input label="Name"></paper-input>
        <paper-input label="Address"></paper-input>
      </paper-step>
      <paper-step label="Write a word about you" editable optional>
        <paper-textarea label="Your description" rows="3"></paper-textarea>
      </paper-step>
      <paper-step label="Enter personal informations">
        <paper-input label="Name"></paper-input>
        <paper-input label="Address"></paper-input>
      </paper-step>
    </paper-stepper>
    <neon-animated-pages
      id="pages"
      class="flex"
      selected="[[selected]]"
      entry-animation="[[entryAnimation]]"
      exit-animation="[[exitAnimation]]">
      <neon-animatable>
        <div class="card">
          <div class="circle">1</div>
          <h1>View One</h1>
          <p>Ut labores minimum atomorum pro. Laudem tibique ut has.
          <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
        </div>
      </neon-animatable>
      <neon-animatable>
        <div class="card">
          <div class="circle">2</div>
          <h1>View Two</h1>
          <p>Ut labores minimum atomorum pro. Laudem tibique ut has.
          <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
        </div>
      </neon-animatable>
      <neon-animatable>
        <div class="card">
          <div class="circle">3</div>
          <h1>View Three</h1>
          <p>Ut labores minimum atomorum pro. Laudem tibique ut has.
          <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
        </div>
      </neon-animatable>
    </neon-animated-pages>

  </template>

  <script>

    Polymer({

      is: 'candid-apps',
      properties: {
        selected: {
          type: Number,
          value: 0,
          notify: true,
          reflectToAttribute: true
        },
        entryAnimation: {
          type: String,
          value: "slide-from-bottom-animation",
          notify: true,
          reflectToAttribute: true
        },
        exitAnimation: {
          type: String,
          value: "slide-up-animation",
          notify: true,
          reflectToAttribute: true
        },
      },
      listeners: {
        '_onPrevClick': '_onPrevClick',
        '_onNextClick': '_onNextClick'
      },
      _onPrevClick: function() {
        this.selected = this.selected === 0 ? 2 : (this.selected - 1);
        console.log(this.selected)
      },
      _onNextClick: function() {
        this.selected = this.selected === 2 ? 0 : (this.selected + 1);
        console.log(this.selected)
      }

    });

  </script>

</dom-module>

{
  "name": "app-drawer-template",
  "authors": [
    "The Polymer Authors"
  ],
  "private": true,
  "dependencies": {
    "app-layout": "polymerelements/app-layout#^0.9.0",
    "app-route": "polymerelements/app-route#^0.9.1",
    "iron-demo-helpers": "~1.2.3",
    "iron-form": "~1.0.16",
    "iron-flex-layout": "polymerelements/iron-flex-layout#^1.3.1",
    "iron-icon": "polymerelements/iron-icon#^1.0.0",
    "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0",
    "iron-localstorage": "polymerelements/iron-localstorage#^1.0.0",
    "iron-media-query": "polymerelements/iron-media-query#^1.0.0",
    "iron-pages": "polymerelements/iron-pages#^1.0.0",
    "iron-selector": "polymerelements/iron-selector#^1.3.0",
    "neon-animation": "~1.1.1",
    "paper-icon-button": "PolymerElements/paper-icon-button#~1.1.1",
    "paper-input": "~1.1.11",
    "paper-slider": "PolymerElements/paper-slider#~1.0.11",
    "paper-stepper": "https://github.com/Zecat/paper-stepper.git#v2.0-beta.1",
    "polymer": "polymer/polymer#^1.4.0"
  },
  "devDependencies": {
    "web-component-tester": "^4.0.0"
  },
  "resolutions": {
    "neon-advanced-animations": "^1.2.0",
    "web-animations-js": "^2.2.0"
  }
}

[jamesmgg]

Any ideas @Zecat?

[jamesmgg]

@Zecat, I figured out what the issue is... your web-component does not support the shadow dom, which is what I'm using.

[dantman]

Related issue, and likely due to the same reason, the scope of elements inside steppers is changing resulting in css from the scope the element is part of not applying.

This is likely due to the fact that paper-stepper is appending effective children into the horizontal/vertical stepper instead of using <content> nodes. This relocates elements from the parent scope into the local scope, which in ShadyDOM ruins the css scope and in Shadow DOM is straight up invalid.

[Zecat]

Oh that is a problem, thanks for your research.

I admit this is quite obscure for me like I'm not experienced with the intricacies of shadow dom. I noticed the problem doesn't come from the dynamic creation of horizontal/vertical steppers in paper-stepper (I did that to fix #4 ) because try to use directly <paper-horizontal-stepper> and <paper-vertical-stepper> without the <paper-stepper> wrapper, the error is the same.

I think the cause is <paper-horizontal-step> and <paper-vertical-step> are dynamically created and appended in the oriented stepper, but yea, same CSS scope problem.

To reproduce

<script>
  // add this in demo/index.html <head> to force shadow dom
  window.Polymer = {
    dom: 'shadow'
    lazyRegister: true
  };
</script>

The step can't be found in demo/index.html

scope = document.getElementById('scope');
var step1 = scope.$.step1;

Uncaught TypeError: Cannot read property 'step1' of undefined

:: content style doesn't apply

#stepSelector > paper-horizontal-step:first-of-type ::content #leftConnectorLine,
#stepSelector > paper-horizontal-step:last-of-type ::content #rightConnectorLine {
  display: none;
}

Dynamic changes to --paper-badge-background from attributes doesn't apply

:host[opened] paper-badge, :host[completed] paper-badge {
   --paper-badge-background: var(--default-primary-color, --google-blue-500);
}

Animation can't be found so the vertical step doesn't open

Could be replaced anyway by a simple CSS height transition

paper-vertical-step: roll-up-animation not found! paper-vertical-step: unroll-animation not found!

[jamesmgg]

Good work @Zecat!