x-flipox not working on custom polymer element

Question

Hi all I am trying to create a custom Polymer Element that uses the < x-flipbox > element inside its template tag.

However it seems that the < x-flipbox > tag it is only working on the index page and not inside my custom elements.

This is my custom element, what am I doing wrong?

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

<link rel="import" href="../bower_components/x-tag-imports/x-tag-flipbox.html">

<polymer-element name="nautes-flipbox" attributes="">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>


  <x-flipbox>
      <div>I'm the front face.</div>
      <div>I'm the back face.</div>
  </x-flipbox>

  </template>
  <script>
    Polymer({

    });
  </script>
</polymer-element>

The element above is just showing the two divs.

<x-flipbox>
      <div>I'm the front face.</div>
      <div>I'm the back face.</div>
</x-flipbox>

This one pasted in the index.html shows only one div (as it should).

In addition, how can I debug this kind of issues? (I am new to polymer and the console is not giving me any error/warning)

I was used on one of the tutorial video on the polimer website (http://www.youtube.com/watch?v=75EuHl6CSTo&list=PLRAVCSU_HVYu-zlRaqArF8Ytwz1jlMOIM&index=10), here it is the github project link:https://github.com/x-tag/x-tag-imports — Niko Zarzani, Jul 24 '14 at 15:40
Does the xtag js object exist in global scope? Open console, type xtag — Arron S, Jul 24 '14 at 18:03
Also, did bower bring in all dependencies? x-tag-core, x-tag-flipbox, etc? — Arron S, Jul 24 '14 at 18:09
This is what I get on the console: http://i62.tinypic.com/2r5f13q.png — Niko Zarzani, Jul 25 '14 at 07:38
I have installed x-tag-core and x-tag-flipbox with bower, then moved the x-tag-imports folder inside my project. This is part of my directory tree: http://i59.tinypic.com/10pr3ah.png — Niko Zarzani, Jul 25 '14 at 07:41

score 0 · Answer 1 · answered Nov 06 '14 at 05:05

You don't need to include it as a import, that's an old wrapper thing the Polymer folks wrote for including X-Tag elements (it's probably what's complicating this). You can simply include the JS (as a <script>) and CSS (as a <link rel="stylesheet">) inside of the x-flipbox repo's src directory where you have your <link rel="import"> for the flipbox

Repo: https://github.com/x-tag/flipbox/tree/master/src

x-flipox not working on custom polymer element

1 Answers1