Some Polymer components don't work as expected

[pfurini]

Hi, I'm testing Polymer components integration. I tried exactly the sample in official docs (the paper-drawer-panel) with the only difference that I added responsive-width attribute, and removed every binding (straight html code), as follows:

<link rel="import" href="/bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/bower_components/paper-item/paper-item.html">
<link rel="import" href="/bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

<template>
  <paper-drawer-panel responsive-width="768px">
    <div drawer>
      <paper-toolbar class="paper-header">
        <span>Menu</span>
      </paper-toolbar>
      <paper-menu>
        <paper-item>Dashboard</paper-item>
        <paper-item><a href="#">Documents</a></paper-item>
      </paper-menu>
    </div>
    <div main>
      <paper-toolbar class="paper-header">
        <paper-icon-button icon="menu" tabindex="1" paper-drawer-toggle></paper-icon-button>
        <div class="title">Test App</div>
        <iron-icon icon="autorenew"></iron-icon>
      </paper-toolbar>
      <div>

      </div>
    </div>
  </paper-drawer-panel>
</template>

It works as expected in desktop browsers, but it fails in IOS (9.x, in simulator or real device). When it loads on iPad portrait (768px wide) the sidebar is not collapsed, but if I try in a desktop browser it works when the windows is under 768px wide.

Plain Polymer implementation works well, as in this plunker: https://embed.plnkr.co/ECsaxV/

Has anyone tested these integration in a complex app? Failing at this simple scenario makes the whole "Aurelia + Polymer" story unsuitable for production use..

[bnavetta]

I just ran it in an iOS 9.2 iPad Retina simulator, and the sidebar was collapsed. Which iPad version were you using?

[pfurini]

Hi I found the culprit (maybe)..

I was following the article on Polymer in the official Aurelia docs, and, instead of starting from a skeleton on github, I integrated polymer in my existing app. Following what is reported on the docs, I created a template with the imports at the top of the file, and in index.html I included only the polymer.html import and the polyfill script. You can see the view template in my original post.

Everything seemed to work correctly, but I had a lot of weird behaviours.

So I started from scratch, and followed the official polymer advice to collect all imports in a single html import (typically an elements.html file) and include it in the index.html . This seems to be the only reliable way to vulcanize the imports, so one should follow this approach anyway...

Doing so fixed everything! It definitely needs more investigation, because if it's confirmed that including the imports in a view template is not reliable, the official docs should be changed accordingly...

Cheers, P.

[bnavetta]

Glad you found something! What was the rest of your setup like? There are a couple subtle ordering issues that might also be involved

[pfurini]

It was an aurelia app created from scratch (not based on a skeleton), with the latest beta packages installed with JSPM. In the index.html file I included the webcomponents_lite script and the polymer html import, and I boostrapped Aurelia exactly as depicted in the Polymer doc page. Using bower, I installed the following:

{
  "name": "web-client-au",
  "private": true,
  "dependencies": {
    "webcomponentsjs": "^0.7.20",
    "polymer": "^1.2.4",
    "paper-elements": "^1.0.7",
    "iron-elements": "^1.0.8"
  }
}

The main and only Aurelia view contained what you see in my first post, and the view model was empty.

Maybe the problem was some missing iron dependencies, used by the paper-drawer-panel when you specify responsive behaviour via responsive-width property...

[bnavetta]

Huh, I can't seem to find anything different between the two. I think paper-drawer-panel has a responsive-width by default, but there could still be any missing dependencies. When you say the view model was empty, do you mean the file was empty or the class?