Error when used within a directive with custom elements name

[jejay]

When the slider is used within a directive with custom element, for example the https://github.com/LukaszWatroba/v-tabs, the following error is thrown:

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

The corresponding code is:

<v-tabs>
  <v-tab>Tab 1</v-tab>
  <v-tab>Tab 2</v-tab>
</v-tabs>

<v-pages>
  <v-page>
     <circular-slider ... />
  </v-page>
  <v-page>
       ...
  </v-page>
</v-pages>

A temporary solution is to use divs as fallback:

<v-tabs>
  <v-tab>Tab 1</v-tab>
  <v-tab>Tab 2</v-tab>
</v-tabs>

<div v-pages>
  <div v-page>
     <circular-slider ... />
  </div>
  <div v-page>
       ...
  </div>
</div>

This does work as expected.

[jejay]

It should be said that the v-tabs directive is not working anymore correctly with the div fallback. This is mainly a css issue. For reproducing the working "fallback" you should leave <v-tabs> as it is and only change <v-page(s)> to <div vpage(s)> and also the css accordingly.

I used the chrome 51.

[jejay]

Sry for the inconvenieunce, but I found out the issue is a css related issue.. The problem does not lie in the elements custom name but rahter in some css that the v-tabs-directive contains.

All what is needed to reproduce the error is:

<div style="display:none">
    <circular-slider
        class='my-slider'
        animate='true'
        on-slide='onSlide'
        on-slide-end='onSlideEnd'
        min="0"
        max="360"
        value="subject.selected.rotation">
    </circular-slider>
</div>