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)

Answer 1

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