Hi,
Related to the icons not loading I have used the ‘WebComponentsReady’ event to delay rendering of the entire template.
This, however creates another issue while rendering
paper-drawer-panel
paper-header-panel(drawer)
See her for the code without the WebComponentsReady Defer:
<paper-drawer-panel style="touch-action: auto;" class="x-scope paper-drawer-panel-0">
<iron-media-query id="mq" class="style-scope paper-drawer-panel">
</iron-media-query>
<iron-selector attr-for-selected="id" activate-event="" class="left-drawer transition style-scope paper-drawer-panel">
<div id="main" class="style-scope paper-drawer-panel" style="left:256px;right:;">
<div id="scrim" class="style-scope paper-drawer-panel"></div>
</div>
<div id="drawer" class="style-scope paper-drawer-panel" style="width:256px;">
<paper-header-panel drawer="" mode="standard" class="x-scope paper-header-panel-0">
<paper-toolbar class="has-shadow x-scope paper-toolbar-0" role="toolbar">
<div id="topBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">
<div>Application</div>
</div>
<div id="middleBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">
</div>
<div id="bottomBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">
</div>
</paper-toolbar>
<div id="mainContainer" class="flex style-scope paper-header-panel">
<paper-input id="searchInput" label="Search" class="x-scope paper-input-0">
<paper-input-container class="style-scope paper-input x-scope paper-input-container-0">
<span>
</span>
<div class="floated-label-placeholder style-scope paper-input-container"> </div>
<span>
</span>
<template is="dom-if" class="style-scope paper-input-container"></template>
<div class="input-content style-scope paper-input-container">
<label class="style-scope paper-input" id="paper-input-label-16">Search</label><input is="iron-input" id="input" class="style-scope paper-input" autocomplete="off" placeholder="" aria-describedby="" aria-labelledby="paper-input-label-16">
<template is="dom-if" class="style-scope paper-input"></template>
<template is="dom-if" class="style-scope paper-input"></template>
</div>
<div class="underline style-scope paper-input-container">
<div class="unfocused-line fit style-scope paper-input-container"></div>
<div class="focused-line fit style-scope paper-input-container"></div>
</div>
<div class="add-on-content style-scope paper-input-container">
</div>
</paper-input-container>
</paper-input>
<div>
<paper-menu role="menu" tabindex="0" class="x-scope paper-menu-0">
<div class="content style-scope paper-menu">
<paper-item role="listitem" class="x-scope paper-item-0">
<iron-icon icon="inbox" item-icon="" class="x-scope iron-icon-0">
<iron-meta id="meta" type="iconset" class="style-scope iron-icon"></iron-meta>
</iron-icon>
Inbox
</paper-item>
</div>
</paper-menu>
</div>
</div>
</paper-header-panel>
</div>
</iron-selector>
</paper-drawer-panel>
Note that the is within the container DIV#drawer.
When I run with deferred option the paper-header-panel is NOT rendered within the Drawer div:
<paper-drawer-panel style="touch-action: auto;" class="x-scope paper-drawer-panel-0">
<iron-media-query id="mq" class="style-scope paper-drawer-panel">
</iron-media-query>
<iron-selector attr-for-selected="id" activate-event="" class="left-drawer transition style-scope paper-drawer-panel">
<div id="main" class="style-scope paper-drawer-panel" style="left:256px;right:;">
<div id="scrim" class="style-scope paper-drawer-panel"></div>
</div>
<div id="drawer" class="style-scope paper-drawer-panel" style="width:256px;">
</div>
</iron-selector>
<paper-header-panel mode="standard" class="has-shadow x-scope paper-header-panel-0" drawer="">
<div id="mainContainer" class="flex style-scope paper-header-panel">
</div>
<paper-toolbar role="toolbar" class="x-scope paper-toolbar-0">
<div id="topBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">
</div>
<div id="middleBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">
</div>
<div id="bottomBar" class="center horizontal layout toolbar-tools style-scope paper-toolbar">
</div>
<div>Application</div>
</paper-toolbar>
<paper-input id="searchInput" label="Search a podcast" class="x-scope paper-input-0">
<paper-input-container class="style-scope paper-input x-scope paper-input-container-0">
<span>
</span>
<div class="floated-label-placeholder style-scope paper-input-container"> </div>
<span>
</span>
<template is="dom-if" class="style-scope paper-input-container"></template>
<div class="input-content style-scope paper-input-container">
<label class="style-scope paper-input" id="paper-input-label-387">Search a podcast</label><input is="iron-input" id="input" class="style-scope paper-input" autocomplete="off" placeholder="" aria-describedby="" aria-labelledby="paper-input-label-387">
<template is="dom-if" class="style-scope paper-input"></template>
<template is="dom-if" class="style-scope paper-input"></template>
</div>
<div class="underline style-scope paper-input-container">
<div class="unfocused-line fit style-scope paper-input-container"></div>
<div class="focused-line fit style-scope paper-input-container"></div>
</div>
<div class="add-on-content style-scope paper-input-container">
</div>
</paper-input-container>
</paper-input>
<div>
<paper-menu role="menu" tabindex="0" class="x-scope paper-menu-0">
<div class="content style-scope paper-menu">
</div>
<paper-item role="listitem" class="x-scope paper-item-0">
<iron-icon icon="inbox" item-icon="" class="x-scope iron-icon-0">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
<g class="style-scope iron-icon">
<path d="M19 3H4.99c-1.1 0-1.98.9-1.98 2L3 19c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.34 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z" class="style-scope iron-icon"></path>
</g>
</svg>
<iron-meta id="meta" type="iconset" class="style-scope iron-icon"></iron-meta>
</iron-icon>
Inbox
</paper-item>
</paper-menu>
</div>
</paper-header-panel>
</paper-drawer-panel>
I am not sure where the issue lies. Blaze makes the Polymer function break that moves child elements in their wrappers.
Ideally I would not use the WebComponentsReady because the icon issue, but now it is one issue or another.
Can anybody verify this issue?
The WebCOmponentsReady deffered can be done like this: https://github.com/loneleeandroo/meteor-polymerize/blob/master/polymerize-client.coffee
screenshots of the rendering issue; Polymer 1.0 and iron router or flow router