TypeError: Cannot read property 'removeAttribute' of undefined

[dman777]

Using Polymer 1.7.*., chrome, and not using webcomponents.min.js file.... native shadow dom instead.

l2t-paper-slider.html:447 Uncaught TypeError: Cannot read property 'removeAttribute' of undefined
    at HTMLElement._setInert (l2t-paper-slider.html:447)
    at HTMLElement._posObs (l2t-paper-slider.html:423)
    at HTMLElement._observerEffect (polymer.html:1656)
    at HTMLElement._effectEffects (polymer.html:1501)
    at HTMLElement._propertySetter (polymer.html:1485)
    at HTMLElement.__setProperty (polymer.html:1494)
    at HTMLElement._applyConfig (polymer.html:2104)
    at HTMLElement._afterClientsReady (polymer.html:2098)
    at HTMLElement._ready (polymer-mini.html:70)
    at HTMLElement._readyClients (polymer-mini.html:78)

    <div class="container">
      <l2t-paper-slider total-slides="1">
        <paper-slide style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=28&amp;bg=C5CAE9&amp;txtclr=212121&amp;txt=300%C3%97300&amp;w=300&amp;h=300&amp;fm=png');"></paper-slide>
      </l2t-paper-slider>
    </div>

[dman777]

I changed:

   _setInert: function() {
        var deep = this.$.container,
            sliSel = deep.querySelectorAll('paper-slide');

to

      _setInert: function() {
           sliSel = this.querySelectorAll('paper-slide');

In addition, I had to make a <paper-slide>2</paper-slide> dummy element:

    <div class="container">
      <l2t-paper-slider auto-progress slide-duration="2"  total-slides="5">
        <template is="dom-repeat"
          items="[[listing.results173.images]]" 
          as="url"
          id="listResults">
          <paper-slide 
            style="background-image: url([[computeImageURL(url)]]); background-repeat: no-repeat" 
            ></paper-slide>
          </iron-image>
        </template>
        <paper-slide>2</paper-slide>
      </l2t-paper-slider>
    </div>

[Link2Twenty]

Can you try

_setInert: function() {
  var deep = this.shadowRoot.querySelector('#container'),
  sliSel = deep.querySelectorAll('paper-slide');

I think shadowRoot.querySelector('#container') should do the same thing as $.container but just a longer way of typing it.

[wq9]

Changing

_setInert: function() {
        var deep = this.$.container,
            sliSel = deep.querySelectorAll('paper-slide');

to

_setInert: function() {
           sliSel = this.querySelectorAll('paper-slide');

worked for me. I didn't need to make a dummy <paper-slide>.

However, changing to

_setInert: function() {
  var deep = this.shadowRoot.querySelector('#container'),
  sliSel = deep.querySelectorAll('paper-slide');

did not work.

[wq9]

_setInert: function() {
           sliSel = this.querySelectorAll('paper-slide');

doesn't work with multiple instances of l2t-paper-slider.

I changed it to

_setInert: function() {
    var sliSel = this.getContentChildren('#myContent');

and added id="myContent" to <content id="myContent"></content>

[Link2Twenty]

Right I know what the issue is now, it's to do with the order of operations.

[Link2Twenty]

OK, I've patched it to master (but not to a release)

can you try it out here and let me know if that solves everything

https://jsfiddle.net/link2twenty/5kp15L5L/

Thanks 🙂

[Link2Twenty]

I've pushed it to a new release.