FAQ Database Discussion Community


Prevent polymer from setting sub-elements class to style-scope

polymer,polymer-1.0
I'm having some trouble migrating to Polymer 1.0 My main problem is that the classes "style-scope" and "my-element" are being applied to every child node in the element. This is not a problem when using something like this: <paper-dialog modal class="vertical layout"> <div class="top"> <div class="green">{{format(inputtext)}}</div> It just changes their...

Having trouble applying a mixin in Polymer

html,css,polymer,polymer-1.0
I'm having problems getting a mixin to work in polymer. I've created --test-theme but it's not applying the style inside the element. Any ideas where I'm going wrong? story-card.html <dom-module id="story-card"> <style> :host { display: block; box-sizing: border-box; } #story-card { min-height: 5em; max-width: 45%; margin-left: auto; margin-right: auto; padding:...

Is grunt-vulcanize compatible with vulcanize 1.8.1?

polymer-1.0
I'm starting to experiment with Polymer 1.0 and am having issues with the vulcanize process. I have included a separate html file for all of my component imports that is loaded via an import in index.html. This site is currently a single page with a paper-drawer-panel a couple of paper-header-panels...

Polymer 1.0 'array-style' path accessors, alternative to bracket notation in expressions

polymer,polymer-1.0
The Polymer 1.0 documentation states: The path syntax doesn’t support array-style accessors (such as users[0].name). However, you can include indexes directly in the path (users.0.name). How would one get around this in setting the path dynamically, and obtain the same behavior as the following example using Polymer 0.5? This is...

How to declare and bind to properties with type=“object” in Polymer 1.0

json,polymer,polymer-1.0
I'm having an issue understanding how Polymer 1.0 handles declared properties, specifically those with the type="object". In order to figure this out I am trying to create a simple element to select a material type and display things about it. Here is what my element looks like so far <dom-module...

Dropshadow from paper-toolbar overlays paper-dialog

css,polymer,polymer-1.0
I have basic drawer app with a dialog box. When the dialog box opens the dropshadow from the toolbar(I assume) is bleeding over the box. Is there a fix for this? <paper-drawer-panel> <paper-header-panel drawer> </... <paper-header-panel main> <paper-toolbar> <paper-dialog>...</paper-dialog> </paper-toolbar> </paper-header-panel> </paper-drawer-panel> Some things I have tried includes moving the...

Dynamic update of dom-repeat templates by changing the underlying array

javascript,dom,polymer,polymer-1.0
Is there a Polymer dom api method or other ways to automatically update the repeated template with additional elements, should the underlying array gets updated? I have a dynamic array that gets updated through ajax calls repeatedly. This array keeps changing its length (elements get incrementally appended or removed based...

Polymer 1.0: Multiple calls to send() method of iron-request

javascript,ajax,polymer,polymer-1.0
I have a component that uses an instance of <iron-ajax> to retrieve data from the back-end, and I would like to use <iron-request> to send updates such as POST/DELETE requests. Everything works perfectly the first time around. However if the request is invoked again, I get an error: Uncaught TypeError:...

Polymer 1.0 cannot find events for paper-menu or paper-item

polymer,polymer-1.0
Upgrading to Polymer 1.0, How do I listen/capture to change in "focusedItem" of iron-menu-behaviour? I cannot see any event or property change listener for an item change i.e. change in paper-item selection within a paper-menu. I cannot see any such events here: https://elements.polymer-project.org/elements/iron-menu-behavior?active=Polymer.IronMenuBehavior

Conditional template on Polymer 1.0

polymer,polymer-1.0
I'm having trouble applying the new conditional template, in particular with the condition itself, I think. I've got something like this: <template is="dom-repeat" items="{{menuitems}}" as="poscol"> <template is="dom-if" if="{{index != 4}}"> <div class="positioncolum horizontal layout center wrap flex"> <span>{{index}}</span> <template is="dom-repeat" items="{{poscol}}" as="mitem" > <main-menu-item mitem="{{mitem}}" order="{{mitem.TotalOrder}}" onclick="clickMainMenuMod(index)">...

Polymer 1.0 passing JSON string as proprty

arrays,json,polymer,polymer-1.0
I am back with new question and looking for expert help once again! In my Polymer 0.5 project I had a JSON array passed to a property like this: <horizontal-barset max="3320000" data='[ {"title": "Annuals", "prevord": "1-15-2015", "ds": [ {"subhead": "Last Year Sales", "value": "2960000", "className" : "last-year"}, {"subhead": "YTD", "value":...

Shared behavior state across custom elements

javascript,internationalization,polymer,polymer-1.0
I have these two custom Polymer Elements (Polymer 1.0.3): Displays text to be translated. Displays button to trigger loading of translation. I also have a Behavior that holds the translations (json object) and contains all the functions that make translation possible. This is what I expect to happen: Click the...

Polymer 1.0 - Binding css classes

polymer,polymer-1.0
I'm trying to include classes based on parameters of a json, so if I have the property color, the $= makes the trick to pass it as a class attribute (based on the polymer documentation) <div class$="{{color}}"></div> The problem is when I'm trying to add that class along an existing...

Data binding in a dynamically inserted polymer element

binding,polymer,web-component,observers,polymer-1.0
There're some times when we could need adding a custom element dynamically into a context. Then: The inserted polymer could receive some properties bound to another property inside the context, so it can change accordingly. At polymer 0.5 we could use PathObserver to binding a property to a context property...

Does the webcomponentsjs library support Internet Explorer 9?

polymer-1.0
webcomponents-lite.min.js - does this support IE9? I am not getting positive result while running Polymer-starter-kit. Can someone help me?

Preselect a default page in iron-pages when using with paper-tabs

javascript,polymer,polymer-1.0
I am using Polymer iron-pages along with paper-tabs in my rails app. The problem is none of pages were shown until one of the paper-tabs was clicked. I want the first page in iron-pages to be selected by default without user interaction. I have put both paper-tabs and iron-pages in...

How to style paper elements inside of a custom element (Polymer 1.0)?

html,css,polymer,polymer-1.0
Whatever I do, I can't seem to be able to style paper-elements using custom properties inside a custom element: <dom-module id="ts-dashboard"> <style> :host { display: block; --paper-tabs-selection-bar-color : #ED1C23; } paper-tabs { background-color : #962E33; } </style> <template> <paper-tabs selected="{{selected}}"> <paper-tab>Choice 1</paper-tab> <paper-tab>Choice 2</paper-tab> </paper-tabs> <!-- some more elements... -->...

:host styles have no effect

polymer,polymer-1.0
I had a wokring app with some :host styles on custom elements built with Polymer 5.5. Now, I'm converting this to Polymer 1.0 but run into this weird issue: Styles defined with :host are not applied. For testing purposes I took the example right from the documentation: <dom-element id="my-element"> <style>...

How to use Polymer template auto-binding in Polymer1.0?

html,css,html5,polymer,polymer-1.0
Polymer doesn't provide much detailed documentation as now. So I am wondering how to use the template auto-binding feature. Previously with polymer 0.5 <template is=auto-binding> would work. But doesnt work any more with Polymer 1.0. My use-case is not building custom elements using Polymer instead build a web app using...

Dynamically adding and removing Event listeners

javascript,polymer,polymer-1.0
I added a tap listener to a div in a custom element using var nicediv = document.getElementById('nicediv'); nicediv.addEventListener('tap',this.listenerfunc.bind(this),false); This is successful but I am unable to remove the event listener. This didn't work. nicediv.removeEventListener('tap',this.listenerfunc); Any thoughts?...

Using dom-repeat over a flat array of strings

polymer,polymer-1.0
I have a flat array of strings protocol.domainNames = ["a", "b", "c"] and I'm trying to render it inside a component using this template: <select id="select-domain"> <option>Select domain</option> <template is="dom-repeat" items="{{protocol.domainNames}}" as="domainName"> <option value="{{index}}">{{domainName}}</option> </template> </select> Unfortunately, I'm getting a list of <option>s that are empty: All examples in the...

Polymer 1.0 default icon set in iron-icons not working using blaze (meteor) templating engine

polymer,polymer-1.0
After upgrading to Polymer 1.0, default iron-icons set is not working. I am trying to use home icon from the default icon set. HTML code fragment: <link rel="import" href="/components/iron-flex-layout/classes/iron-flex-layout.html"> <link rel="import" href="/components/iron-icons/iron-icons.html"> <link rel="import" href="/components/iron-icons/communication-icons.html"> <link rel="import" href="/components/iron-form/iron-form.html"> <link rel="import" href="/components/iron-selector/iron-selector.html">...

With iron-ajax, how to read the headers of a response?

javascript,ajax,polymer,polymer-1.0
When a response for a request arrives, is there any way to read the response headers?

Disable the click-anywhere-to-close functionality of paper-dialog and make it persistent

javascript,polymer-1.0
The title is pretty much my question. I have a <paper-dialog> that I would like to only be closable/openable by specific elements on the page, however, I do not want it to be modal and would like to have the rest of the page continue to be usable....

Polymer 1.0: Using template dom-repeat inside paper-menu elements to display iron-pages on selection

polymer,web-component,templatetag,polymer-1.0
Using Polymer 1.0, I have created a paper-drawer-panel layout. In the drawer I have a menu using paper-menu with paper-items which are bound to the iron-pages. I took this example from Content Switcheroo with Core-Pages -- Polycasts #09 and converted it to use the Polymer 1.0 elements. In the code...

dom-if doesn't get updated in dom-repeat

javascript,html,templates,polymer,polymer-1.0
<template is="dom-repeat" items="{{fruit_list}}" as="fruit"> <template is="dom-if" if="{{fruit.isOrange}}"> I'm an orange! </template> </template> Here I have a dom-if template inside a dom-repeat template. It works great if the value of fruit.isOrange has already been finalized. However if not, for example, it was true when before but now I change it to...

paper-header-panel content div behaving erratically

css,polymer,polymer-1.0
I am doing a simple test of polymer 1.0 elements. In the paper-header-panel test, the content area elements are not visible or are moving over the paper-header div. The demo is here and the code is below. Why is the content text not being displayed? <!DOCTYPE html> <html> <head> <title>paper-header-panel...

Polymer 1.0 - Issue selecting dynamic element by id

javascript,web-component,polymer-1.0
I am trying to select an element by id that was created dynamically: <dom-module id="filter-box"> <style> :host { display: block; } </style> <template> <h4 id="title">{{title}}</h4> <paper-checkbox id="test">test</paper-checkbox><br> <template is="dom-repeat" items="{{filters}}"> <paper-checkbox id="{{item}}">{{item}}</paper-checkbox><br> </template> </template> </dom-module> <script> (function () { Polymer({ is: 'filter-box',...

How to notify page transition with iron-pages

polymer,polymer-1.0
I am playing around with the Polymer Starter Kit by building a simple application which has a few pages. I would like for one of the pages to display a list of items that it loads from the server. The issue is that this list must load only when the...

Using a listener for a tap inside a dom-if

polymer,polymer-1.0
I have a simple button that I want to trigger something when pressed. I gave the button an id and created a listener for id.tap. This works fine, but when I put my button inside a template[is=dom-if] it stops working. Is this meant to work like this? How do I...

Computed property isn't recomputed when array dependency is mutated

polymer,polymer-1.0
I'm using a computed property as the items for a dom-repeat. <template is="dom-repeat" items="{{double(values)}}"> <span>{{item}}</span> </template> When its dependency values changes, the property isn't recomputed. addValue: function() { this.push('values', this.values.length+1); this.async(this.addValue, 1000); }, If, instead of mutating values, I set it to a new array, it does work: this.set('values', this.values.concat(this.values.length+1))...

Polymer 1.0 import all elements at once

html,polymer,polymer-1.0
I have started locking at Googles new Polymer SDK, now that I started learning I asked my self if it's possible to include all elements of the paper group at once? Otherwise my header gets bigger as my actual body code... <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> ...

Browser compatibility of Polymer

cross-browser,polymer,compatibility,polymer-1.0
I am starting to use Polymer 1.0: the only thing I tried is a simple template like this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"></link> <link rel="import" href="bower_components/iron-icons/iron-icons.html"> <title>Polymer...

Are there any built in auto-complete input components for Polymer 1.0?

polymer,polymer-1.0
I've been muddling around with Polymer 1.0 since its release, and I've hit a use case where a select list just won't be sufficient (too many options to select from). What I really need is an autocomplete textbox. Is there one built-in or planned in the paper or iron Polymer...

Polymer 1.0 - I cannot use class={{variable}}. How can I set class name dynamically?

polymer,polymer-1.0
I have understood from my last question here that string concatenate is not allowed with 0.9 and above (currently I am migrating to version 1.0). I have to rather wrap every variable inside separate HTML element. However there are times when I need to use a href or class attribute...

How to two-way bind iron-input to dom-repeat's item?

javascript,polymer,polymer-1.0
I just started playing with Polymer 1.0 and am trying to do a very simple binding to collection. I am able to display text within dom-repeat, but the two-way binding to iron-input does not work. I tried array of strings, and objects. No luck. <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="bower_components/iron-input/iron-input.html">...

Using dom-if for conditionals in arrays

polymer,polymer-1.0
In 0.5 I could use the expressions in the dom-if to select for certain things in arrays while looping through them. How could I achieve the same effect in 1.0?

paper-ripple is listening to click events outside of its container

javascript,html,polymer,paper-elements,polymer-1.0
I'm trying to create a simple ripple effect for a card in my app. It works great, but it is also responding to mouse events outside of its container: Code looks like this: <dom-module> ... <template> ... <paper-material> <div class="wrapper">...</div> <paper-ripple></paper-ripple> </paper-material> ... </template> </dom-module> I don't quite see why...

What's the difference between binding to [[var]] and {{var}} in Polymer 1.x?

data-binding,polymer,2-way-object-databinding,polymer-1.0
I am familiar with bindings with curly braces, like {{variable}}, from Polymer 0.5. However, in examples and code snippets for the release version of Polymer, I've begun to notice bindings with square brackets, such as [[variable]], as well. Does {{variable}} mean something different now, or is it the same and...

Listening children's property change notifier using prototype's listeners property in Polymer not working

javascript,polymer,polymer-1.0
Why will not this work ? I am trying to use notify and listeners together. Am I missing something ? Polymer({ is: 'x-child', properties: { message: { type: String, value: '', notify: true } } }); Polymer({ is: 'x-dad', listeners: { 'message-changed': '_onMessageReceived' }, _onMessageReceived: function (e) { alert('child sent...

Dynamically created html import inside a polymer element (Version 1.0)

javascript,html,polymer,web-component,polymer-1.0
Dynamically created html import inside a polymer element Does anyone know how to dynamically add a html import into a polymer element (version 1.0)? The code below doesn't seem to work and complains that the.. HTML element <link> is ignored in shadow tree. Does anyone know any way around this...

Why do Polymer's computed properties need explicit property arguments?

polymer,polymer-1.0
I was digging a bit into the Polymer 1.0 elements and I am a little curious about the computed properties. For example, in paper-drawer-panel.html, <dom-module id="paper-drawer-panel" …> … <div id="main" style$="[[_computeDrawerStyle(drawerWidth)]]"> … </div> … </dom-module> <script> Polymer({ is: 'paper-drawer-panel', … _computeDrawerStyle: function(drawerWidth) { return 'width:' + drawerWidth + ';'; },...

core-animated-pages in Polymer 1.0

polymer,web-component,polymer-1.0
I noticed that there is no substitute for core-animated-pages in Polymer 1.0 (there is no iron-animated-pages). Am I missing something? Is there any other way to implement similar functionality? Any answer greatly appreciated.

Polymer 1.0 iron-flex-layout only works on some tags

css,flex,polymer,polymer-1.0
Update: The polymer docs are now updated to reflect the answer below I'm doing a polymer 1.0 app. I'm trying to layout some paper toolbars on part of the screen horizontally. It seems I can get iron-flex-layout's @apply(--layout-horizontal) to work on some elements but not on others. I put together...

Is there an equivelent to the “polymer-ready” event in Polymer 1.0?

polymer-1.0
I need to know when I can begin using my custom Polymer elements programmatically. The elements are still undefined even in my window.onload handler. Is there an established way of doing this correctly with Polymer 1.0? -Edit- I see there is a downvote, so let me clarify the issue. I...

Polymer 1.0 - Issue with displaying values inside template is=“dom-repeat”

javascript,polymer,polymer-1.0
While migrating to Polymer 1.0 from 0.5 I have come across an interesting thing. Thought it might help others having similar problem. I have an element where I am using <template is="dom-repeat" items="{{customers}}">...</template>. The problem I am facing is I have to place every single property binding inside a HTML...

Polymer iron-form not working

polymer,polymer-1.0
I have the following markup in my html: <form is="iron-form" login-form> <paper-input label="Email" type="email" name="email"></paper-input> <paper-input label="Password" type="password" name="password"></paper-input> <paper-button class="self-end btn-primary" raised login-btn>Login</paper-button> </form> In chrome, the form is never upgraded to an iron-form, but it works fine in firefox. However, I can use: document.createElement('form', 'iron-form'); to create an...

Polymer 1.0 access parent e.model in nested repeats

polymer,polymer-1.0
<template is="dom-repeat" items="{{items}}" as="first"> <template is="dom-repeat" items="{{first}}" as="second"> <span on-tap="test">{{second}}</span> </template> </template> items: [["1","2"],["3","4"]], test: function (e) { // access e.model of first } Is it possible to access the e.model of the outer repeat loop? Just getting the object is not enough (altough this would be a start). I...

Why does this polymer element's property resolve to undefined?

javascript,polymer,web-component,polymer-1.0
I am trying to dynamically assign an attribute to an iron-ajax template but it resolves to undefined. <dom-module id="products-service"> <style> :host { display: none; } </style> <template> <iron-ajax id="productsajax" auto url="http://localhost:3003/api/taxons/products" params='{"token":"my-token"}' method='GET' on-response='productsLoaded' handleAs='json'> </iron-ajax> </template> </dom-module> <script> (function() { Polymer({ is: 'products-service', properties: { categoryid: { type:...

How to create a new template instance in Polymer 1.0?

polymer,polymer-1.0
In Polymer 0.5 I used the templateElement.createInstance(dataToBind) to create a new instance of a template and bind the data object to the new instance: var instance = templateElement.createInstance(dataToBind); container.appendChild(instance); In Polymer.Base I found the instanceTemplate function to create a new instance of the template, but this function does not bind...

Polymer 1.0 - paper-ripple goes all over the screen instead fit in the element

polymer,polymer-1.0
I'm trying to use the ripple effect on a clickable list of items but I'm facing the issue that the ripple effect goes all over the screen when I encapsulate that list into a custom element. It works great if I place it in my index.html but fails when I...

Computed bindings in auto-binding templates in Polymer 1.0

polymer,polymer-1.0
How can I define computed bindings in auto-binding templates (i.e. those declared as <template is='dom-bind'>...</template>)?

Polymer google-signin element gets Cannot read property 'currentUser' of null

javascript,polymer,web-component,polymer-1.0
I'm trying to get the google-signin element to work with just adding this to my HTML: <google-signin clientId="[my-client-id]" scopes="https://www.googleapis.com/auth/drive"></google-signin> The Sign-in button shows up on the page, but when I click it, I get the error: Cannot read property 'currentUser' of null I'm testing it out on just localhost, so...

How to autofocus/autoclick paper-input in polymer 1.0?

javascript,polymer,polymer-1.0
I was able to use javascript and call .click() or .focus() in order to have the paper-input ready for typing in polymer 0.5.6. 1.0 seems to have lost this ability. Is there a way to have the input ready to type either using JS or by using the new 1.0...

Selecting element (Polymer 1.0)

polymer,polymer-1.0
I am working on migrating to Polymer 1.0 Here is my template: <template> <div class="scroll"> <div class="content"> <content></content> </div> <div class="bar barY"></div> </div> </template> The content gets filled with text in the main html file. I need to get the scroll height of this div. I used to do: height...

Polymer 1.0 - Where is the old core list?

polymer,polymer-1.0
One of the issues I'm having with the new polymer release is identifying which components are replacing the old ones. In the case of the old componente core-list, I cannot find the equivalent for the new release. Does anyone know which element replace core-list?

Change style programmatically

polymer,polymer-1.0
I'm attempting to follow the Custom property API for Polymer elements docs with regards to updating an element's CSS properties (and styles) programmatically but can't seem to get it working. Here is my current attempt: <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> <dom-module id="my-namecard"> <style> :host { --color: green; } span { color: var(--color,...

iron-media-query doesn't work - Polymer 1.0

polymer,polymer-1.0
I'm new to Polymer (1.0). My <iron-media-query> element is not working. No errors in the console but it does not display anything. Some improvements would be awesome! I'm trying to get it up and running since 2 hours. :) Thanks in advance Ron <!-- Works correctly --> <link rel="import" href="../polymer/polymer.html">...

Trying to append a Polymer element in another Polymer element

javascript,polymer,polymer-1.0
I have a v-fire Polymer : <script> Polymer({ is: 'v-fire', properties : { onFire: { type : String, reflectToAttribute: true } }, firing: function () { this.fire('fire'); } }) </script> I want to be able to use it anywhere in my Polymer elements to make them trigger an internal function...

Inheritance of customized polymer element in version 1.0

polymer,polymer-1.0
I have two polymer elements which have similar characteristics. I'm trying to "merge" those two to one element. What I see in the documentation is that custom elements can not be inherited in polymer 1.0. It starts here: <div title="{{tile.description}}" class="flex-item"> <template is='dom-if' if='{{typeIsSingle}}'> <single-item-tile tile='{{tile}}'></single-item-tile> </template> <template is='dom-if' if='{{typeIsGrouped}}'>...