Polymer 1.0 Data Binding in
I'm afraid what you want is (at least currently) not possible. Data-binding works only inside <template> tags, either a <template is="auto-binding"> or the template inside a <dom-module>. In the <style> tag, data-binding simply won't work. You could try putting another <style> tag INSIDE the <template> tag (which is messy), but...
document.createElement multiple arguments
javascript,html,html5,dom,polymer
At the moment, document.createElement will only take one parameter (Ignoring the second). It does appear that there is a spec that will allow you to pass a typeExtension which you can read about here. This spec is still in the works, and is not implemented in any form on any...
Using a listener for a tap inside a dom-if
Elements inside a dom-if don't exist yet when the element is created, so they're not accessible using this.$. Either give the element an on-tap attribute, or use Polymer.dom(this.root).querySelector to find the element.
polymer 1.0 data binding not working as expected
javascript,php,arrays,json,polymer
First, you need to transform your json {{data}} into an array of objects readable by <template is='dom-repeat'>. I assume that you want {"login":{"url":"/login","parent_id":"0"},"register":{"url":"/register","parent_id":"0"}} to become something like [ {name: "login", url: "/login", parent_id: "0"}, {name: "register", url: "/register", parent_id: "0"} ] The actual code to do the above should be...
How to notify page transition with iron-pages
Or you can just observe route and when route === "some-page", send the refresh request to <lazy-list>? <dom-module id="my-app"> <template> ... <iron-pages attr-for-selected="data-route" selected="{{route}}"> <section data-route="some-page"> <paper-material> <lazy-list id="list"></lazy-list> </paper-material> </section> <section data-route="another page"> <paper-material elevation="1"> ... </paper-material> </section> </iron-pages> ......
Are there any Chrome-specific techniques to scope/isolate CSS?
css,google-chrome,google-chrome-extension,polymer,shadow-dom
What you will want to look into is shadow-dom. This will enable you to create a widget/component (which would be your injected html). This would mean that the DOM tree for the widget/component is encapsulated and no external styles from the page will affect it. There is a good article...
Click event not firing in polymer paper-icon-button
See here for the migration guide. For your event not firing see here Curly brackets ({{}}) are not used for declarative event handlers in the template. Your code should be: <paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button> Your element registration needs to also now change. See here <body unresolved class="fullbleed layout vertical"> <dom-module id="my-app">...
Trying to append a Polymer element in another Polymer element
javascript,polymer,polymer-1.0
It looks like you're approaching the events system incorrectly. What you want is to run a method on fire-tester when it detects the fire event on the child v-fire element, correct? This is how I would put that together: v-fire.html <script> Polymer({ is: 'v-fire', firing: function() { this.fire('fire'); } });...
Using Polymer iron-ajax in repeating template
Firstly as vasek says, your JSON is incorrect. dom-repeat needs an array to iterate over and your JSON is currently returning an object. Secondly, you are accessing the properties on the iron-ajax element incorrectly. As the docs state In order to configure camel-case properties of elements using attributes, dash- case...
Computed bindings in auto-binding templates in Polymer 1.0
Simply assign the computed binding directly to the template element via a script, making sure that the involved properties are initialized after the definition of the computed binding. Example: <template is="dom-bind"> <div> <input value="{{text::input}}"> </div> <div>[[describe(text)]]</div> </template> <script> (function() { var template = document.querySelector('template[is="dom-bind"]'); template.describe = function(text) { if (text)...
What's the difference between binding to [[var]] and {{var}} in Polymer 1.x?
data-binding,polymer,2-way-object-databinding,polymer-1.0
Just as you've noticed, there are now two different syntaxes for data-binding, which have different purposes: {{variable}} indicates that you would like Polymer to automatically detect whether or not the binding should be one-way or two-way. [[variable]] indicates that you want the binding to one-way only. Why the change? Polymer...
Dart - Polymer Unit Testing. Not able to reference dom elements after click event
At first, I think you should add the @whenPolymerReady annotation to main() instead of your Polymer initialization code. Instead of expect(document.querySelector('qme-header').shadowRoot .querySelector('#headerErrorDiv'), isNotNull); you could use expect(document.querySelector('qme-header::shadow #headerErrorDiv'), isNotNull); I don't see a problem in your cod. Can you please provide a complete example that allows to reproduce your problem...
Polymer hello-world component not rendering
The older tutorial will not work for Polymer 1.0, as there are many drastic changes. In the new version, a Hello World would look like: <dom-module id="hello-world"> <template> <h1>Hello world!</h1> </template> </dom-module> <script> Polymer({ is: 'hello-world' }); </script> More information can be found in the Polymer documentation at https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html...
Polymer core-localstoreage TypeError: Cannot read property 'save' of undefined
You are looping the creation of a static ID tag, and because you shouldn't have duplicates of an ID, it is throwing an error. Lines causing the issue: <template repeat="{{data}}" > <core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage> </template> ...
Dynamically created html import inside a polymer element (Version 1.0)
javascript,html,polymer,web-component,polymer-1.0
Polymer 1.0 has the utility function importHref(href, onLoad, onError) on every Polymer component. To dynamically import and add your external element you could use this code: this.importHref('path/to/page.html', function(e) { // e.target.import is the import document. var newElement = document.createElement('new-element'); newElement.myProperty = 'foo'; Polymer.dom(this.$.container).appendChild(newElement); }, function(e) { // loading error });...
Binding imperatively
Polymer 1.0 does not support this at the moment - as explained by @kevinpschaaf in Github https://github.com/Polymer/polymer/issues/1778.
Polymer dom-repeat and displaying result of iron-ajax call
I am missing the closing'>' of the template. It should read <template is="dom-repeat" items="{{data}}"> <p><span>{{item.PracticeCode}}</span> - <span>{{item.Name}}</span></p> </template> ...
Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox
If you CSS is not inside a Polymer element you need to add the polyfill version of the selectors to make it work on browsers without native shadow-DOM support html paper-dialog, html /deep/ paper-dialog { margin-top: -150px; margin-left: -300px; } html paper-dialog core-animated-pages, html /deep/ paper-dialog /deep/ core-animated-pages{ height: 300px;...
Is there an “onOpen” event for paper-dialog?
javascript,events,polymer,paper-elements
It appears to inherit iron-overlay-behavior which fires the iron-overlay-opened and iron-overlay-closed events.
Understanding Polymer data-binding and HTML tags
According to the docs : The binding annotation must currently span the entire content of the tag. This means you currently have to wrap your bindings in a tag as you did in this example: This is <b>{{owner}}</b>'s name-tag element. I expect in the future this will be changed so...
Polymer 1.0 access parent e.model in nested repeats
<template is="dom-repeat" id="firstRepeat" items="{{items}}" as="first"> <template is="dom-repeat" id="secondRepeat" items="{{first}}" as="second"> <span on-tap="test">{{second}}</span> </template> </template> <script> items: [["1","2"],["3","4"]], test: function (e) { // First model this.$.firstRepeat.modelForElement(e.target); // Second model this.$.secondRepeat.modelForElement(e.target); } </script> ...
Polymer 1.0 app-theme only affecting index.html and not on custom elements
The themes from polymerthemes.com should apply across your entire project. Just download one of the pre-made themes (or create your own using the Polymer Theme Builder) and link to it like this in your <head>: <style is="custom-style"> @import url("path/to/theme.css"); </style> Alternatively, have a look to see how styles are applied...
Polymer 1.0 in Ember-cli, wrong appearance
javascript,ember.js,polymer,frontend,ember-cli
i have been trying to use polymer 1.0 with ember for the last month, turns out some polymer elements that use as insertion points will not work with ember. I have spoken with a polymer core member and he said they are curerntly working in some interop to get things...
Polymer Data-Binding will not replace
javascript,polymer,web-component
You need to put your data inside a span: "The binding annotation must currently span the entire content of the tag. String concatenation is not supported inside a tag, and the tag can’t contain any whitespace" see: Polymer Documentation on binding to text content...
Create a custom event for a Polymer Custom-Element
javascript,javascript-events,polymer
Try this. (Note: changed event names to be case-insensitive ['AnotherEvent' -> 'another-event'] because the HTML is happier this way): <polymer-element name="my-element"> <template> <other-custom-element on-another-event="{{doAnotherEvent}}"></other-custom-element> </template> <script> Polymer("my-element", { doAnotherEvent: function(){ if (condition){ // in this part I need to fire the event // "my-custom-event" this.fire('my-custom-event'); } } }); </script> </polymer-element>...
How can I access item in parent repeat template while in filter
javascript,html,templates,polymer
One solution is to bind the filter property to a filter generator, like so: filter="{{filterForCategory(category)}}" and then filterForCategory: function(category) { return function(fruit) { return fruit.category === category; } } Full example here: <dom-module id="x-example"> <template> <template is="dom-repeat" items="{{fruit_categories}}" as="category"> <h2>{{category}}</h2> <div> <template is="dom-repeat" items="{{all_fruits}}" as="fruit" filter="{{filterForCategory(category)}}">...
How to style Polymer's toolbar background in 0.5?
It has been a while but I had this working in the past: body core-toolbar { background-color: #00FF00; } with whichever color you want to use as the background-color value....
Polymer bounded property not updating (sometimes)
javascript,binding,polymer,value
Clear the activateEvent property (activate-event attribute) of the iron-selector, like this: <iron-selector attr-for-selected="step-number" selected="{{stepNumber}}" activate-event="">...
Polymer 1.0 iron-flex-layout only works on some tags
According to issue 1601 on polymer's github (https://github.com/Polymer/polymer/issues/1601), they changed the way Custom CSS mixins can be passed to @apply. Instead of chaining multiple mixins in a single @apply call, you have to separate them. this means the following code snippet: .header { @apply(--layout-horizontal --layout-center); } becomes: .header { @apply(--layout-horizontal);...
PolymerElements iron-ajax not posting data
I found a solution. This is not a Polymer problem. When you POST with content type JSON $_POST will not populate. Try this at server side: $json = file_get_contents("php://input"); $_POST = json_decode($json, true); Now your POST-Array will be filled with your request data....
Polymer google-signin element gets Cannot read property 'currentUser' of null
javascript,polymer,web-component,polymer-1.0
Try client-id instead of clientId. <google-signin client-id="[my-client-id]" scopes="https://www.googleapis.com/auth/drive"></google-signin> The google-signin documentation for this attribute doesn't match with the actual code....
Dropshadow from paper-toolbar overlays paper-dialog
I suspect this was fixed here https://github.com/PolymerElements/paper-toolbar/issues/24.
Polymer 1.0 services issue
You have a few things that aren't quite right here. In reddit-post-list you are not using the dom-repeat template correctly. See below: <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="reddit-list-service.html"> <dom-module id="reddit-post-list"> <template> <reddit-list-service posts="{{posts}}"></reddit-list-service> <template is="dom-repeat" items="[[posts]]"> <p>{{item.data.author}}</p> </template> </template>...
populate content based on list selection in Polymer
If you have a side menu like that ( notice on-click="menuSelected" ): <dom-module id="dmf-menu"> <template> <paper-menu> <template is="dom-repeat" items="{{modules}}"> <paper-item on-tap="menuSelected">{{item.name}}</paper-item> </template> </paper-menu> </template> You can add on-tap on paper-item to execute menuSelected method. And then you can use e.model.item to access your clicked item model. <script> (function() { Polymer({...
:host styles have no effect
You should be using dom-module instead of dom-element: <dom-module id="my-element"> <style> :host { display: block; border: 1px solid red; } #child-element { background: yellow; } </style> <template> <div id="child-element">In local DOM!</div> <content></content> </template> <script> Polymer({ is: 'my-element' }); </script> </dom-module> ...
Using dom-repeat over a flat array of strings
You need to do this.push('protocol.domainNames', item); instead of protocol.domainNames.push(item) so that Polymer can see your data changing. The relevant documentation can be found at https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat...
Polymer 1.0: Two-way bindings with input elements
javascript,polymer,custom-element
First note that the notify and reflectToAttribute fields on the value property tell it how to react to it's parent not about how to bind to a child. IOW, notify: true means to make value two-way bindable from the outside, not from the inside. reflectToAttribute: true tells Polymer to write...
Why does this polymer element's property resolve to undefined?
javascript,polymer,web-component,polymer-1.0
I think you're running into a combination of issues here, and need to slightly rethink your structure. First, because the categoryid attribute is bound outside of your element its initial value will be undefined. Basically, your element is created and attached, with all lifecycle methods run, and then categoryid gets...
Polymer 1.0 data binding not working
Call this.notifyPath('navigator.currentStep', this.navigator.currentStep). See https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#set-path. Sometimes imperative code needs to change an object’s sub- properties directly. As we avoid more sophisticated observation mechanisms such as Object.observe or dirty-checking in order to achieve the best startup and runtime performance cross-platform for the most common use cases, changing an object’s sub-properties directly...
Change google-map center using Polymer
In your <script> tag you can create a ready call back function. See lifecycle callbacks Polymer adds an extra callback, ready, which is invoked when Polymer has finished creating and initializing the element’s local DOM. In here you can change the longitude and latitude properties of your my-map element which...
Dynamic update of dom-repeat templates by changing the underlying array
javascript,dom,polymer,polymer-1.0
If you update the array with this.push('myarray', {item}); then that will trigger Polymer's binding observers. More info is in the documentation at https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat
Polymer hide drawer on big screens
The problem is that the new attribute to property mapping in Polymer 1.0 can be a bit confusing. You would actually have to use a force-narrow attribute in HTML that maps to the forceNarrow property in JS. <paper-drawer-panel force-narrow> See https://www.polymer-project.org/1.0/docs/devguide/properties.html#property-name-mapping...
Polymer 1.0 - routing
Polymer does not have routing built into it by default. There are several front-end routing frameworks you can use with Polymer, however. A very commonly used approach is a custom element called app-router, which lets you define routes declaratively with just HTML alone. I've had some success with it before....
dom-if doesn't get updated in dom-repeat
javascript,html,templates,polymer,polymer-1.0
I stand to be corrected, but I think the problem is in your dom-repeat not getting notified, causing dom-if to not update also. You can use this.set('fruit_list.1.isOrange', 'true'); which works for your example. From Polymer documentation: set(path, value, root) - Convienence method for setting a value to a path and...
How to use Polymer template auto-binding in Polymer1.0?
html,css,html5,polymer,polymer-1.0
The new auto-binding templates are <template is="dom-bind">. Documentation can be found at https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind, though it is a little sparse at the moment.
Polymer Main Text is displayed on top of the drawer
I have slightly modified your code. Put this in your body: <paper-drawer-panel> <paper-header-panel drawer> <paper-toolbar class="tall"> <div>Menu</div> </paper-toolbar> </paper-header-panel> <paper-header-panel main> <paper-toolbar> <paper-icon-button icon="menu" tabIndex="1" id="paperToggle" paper-drawer-toggle></paper-icon-button> <div class="flex">Polymer</div> <paper-icon-button icon="refresh"></paper-icon-button>...
Polymer 1.0 how to call a paper-icon-button's tap when a coupled paper-input-container receives the enter key
event-handling,polymer,web-component
Use iron-a11y-keys to listen for an enter keypress <dom-module is="keypress-test"> <template> <iron-a11y-keys target="[[_target]]" keys="enter" on-keys-pressed="_test"></iron-a11y-keys> <paper-input-container id="input"> <label>Enter Will Trigger</label> <input is="iron-input"></input> </paper-input-container> <paper-input label="Enter Won't Trigger"></paper-input> </template> </dom-module> <script> Polymer({ is: "keypress-test", ready:...
Computed binding doesn't work with on-click (Polymer)
The example shown in the documentation you link to isn't for calling methods or firing events, it's for using computed bindings. i.e. <div>{{ComputedBindingFunction(item)}}</div> If you're your trying to trigger an event, remove the braces: <div on-click="ComputedBindingFunction"></div> ... Access item from the triggered event ComputedBindingFunction: function(event){ _ComputedBindingFunction(event.model.item) } ...
Polymer change notification and two-way binding syntax
I recently had this problem and did this by firing my own event. You can see the documentation for that here (please note that this documentation is for 0.5 but I have done this with version 1.0). In your child element you could change your childClick function to fire the...
Polymer change the icon in paper-icon-button onclick
Expressions like x ? y : z aren't (yet) supported in Polymer 1.0 You will need to use a computed binding instead, something like: icon="{{_icon(isCollapsed)}}" Polymer({ properties: { isCollapsed: { type: Boolean, value: true } }, _icon: function (isCollapsed) { return isCollapsed ? 'icon1' : 'icon2' } }); Changing the...
data binding issue with polymer template inside angular app
It was just a typo. I misspelled the template name.
polymer databinding performence
Performance of data-binding has to do with how many bindings there are, and the expense of whatever side-effects you trigger, not data-size or transfer speeds. Generally anything measured in seconds is much slower than the kind of throughput we worry about in Polymer....
Prevent polymer from setting sub-elements class to style-scope
In order to bind to an attribute that does not match to a respective JS property of that element (e.g. class, href, data-*), you should use $= rather than plain =. <span class$="{{setitemclass(item)}}" on-click="itemClicked" role="button">{{item}}</span> Source: https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding...
Polymer dropdown data binding with AJAX response
javascript,ajax,data-binding,polymer
<template repeat="{{data in yourData}}"> yourData is not an array, it is an object. What you are trying to achieve is this: <template repeat="{{data in yourData.employees}}"> I took the liberty of improving your element a bit. I hope you can learn from this, if you need further explanation feel free to...
Polymer iron-form not working
I'm not sure why the iron-input should work any differently. Are you sure the iron-input is working perfectly as a Polymer element when you create it in the template? (For example, does it have the utility functions like debounce?) I ask because it looks like a standard input. Looking at...
Polymer's two way data-binding not working in an element's child's attribute value
javascript,html5,data-binding,polymer
Good question. Right now I am also struggling to understand how to use binding within the light dom. If I find a solution, I will be sure to post it here. You could move the image insertion out of the product-list component and into the product-card element. It is not...
Set focus for paper-input via radio button
input,radio-button,focus,polymer,paper-elements
You will need to bind a click event to radio1: <paper-radio-button name="radio1" on-click="_setInputFocus">Radio1Label</paper-radio-button> Then define the function _setInputFocus so that it selects the input and sets the focus to it: <script> Polymer({ is: 'the-name-of-your-element', _setInputFocus: function () { this.$$("input").focus(); } }); </script> ...
google-signin don't return user info
polymer,web-component,google-signin,google-web-component
From polymer documentation: The google-signin-success event is triggered when a user successfully authenticates and google-signin-failure is triggered when this is not the case. Both events will also provide the data returned by the Google client authentication process. You can also use isAuthorized attribute to observe authentication state. Additional events, such...
Shared behavior state across custom elements
javascript,internationalization,polymer,polymer-1.0
First, although the notion is to have behavior be a conduit for shared data between instances, as written, each instance will have it's own copy of the translations object and the kick property. Second, even if that data was privatized so it could be shared, the kick binding made via...
Dynamically adding and removing Event listeners
javascript,polymer,polymer-1.0
The problem is the listening function isn't the same function you are attempting to remove. By adding .bind(this), you have altered the function. In other words, this.listenerfunc !== this.listenerfunc.bind(this). This issue is address on the MDN page for addEventListener. See "The value of this within the handler". A quick way...
Polymer Page load up issues
To replicate how the starter kit fades in on load, change the body by adding an unresolved attribute as follows: <body class="fullbleed layout vertical" unresolved> // ... content here </body> from the docs: The unresolved attribute on the element is used to prevent a flash of unstyled content (FOUC) on...
paper-ripple is listening to click events outside of its container
javascript,html,polymer,paper-elements,polymer-1.0
UPDATE (15 June 2015): paper-ripple 1.0.1 was released on 11 June 2015, which includes the PR fixing this problem, making the fixes recommended in this answer obsolete. Simply update bower.json to bind to PolymerElements/paper-ripple#^1.0.1. This is a symptom of the very same bug that plagued another user on SO. The...
Using dom-if for conditionals in arrays
It's more efficient to use the filter/observe feature of dom-repeat instead of nesting dom-if. filter specifies a method that identifies records to display from your collection, observe tells the dom-repeat what data to observe to know when to re-run the filter. E.g. <template is="dom-repeat" items="{{records}}" filter="hasPersonLabel" observe="item.labels"> ... hasPersonLabel: function...
Polymer 1.0 notifyPath for array element
From the docs Mutations to the items array itself (push, pop, splice, shift, unshift) must be performed using methods provided on Polymer elements, such that the changes are observable to any elements bound to the same array in the tree. For example: this.push('employees', { first: 'Jack', last: 'Aubrey' }); ...
iron-media-query doesn't work - Polymer 1.0
You have to change queryMatches="{{}}" to query-matches="{{}}".
Listening children's property change notifier using prototype's listeners property in Polymer not working
javascript,polymer,polymer-1.0
In devguide it writes: When the property changes, the element fires a non-bubbling DOM event to indicate those changes to interested hosts. https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#change-notification-protocol It means that event listeners are invoked only on the x-child element, but not on its ancestors. This may be what you are missing....
With iron-ajax, how to read the headers of a response?
javascript,ajax,polymer,polymer-1.0
The response event handlers gets passed the <iron-request> as the second argument. <iron-request> has an xhr property that is the XMLHttpRequest used to make the request. You should be able to get the response headers from that. <iron-ajax on-response="ajaxResponse"></iron-ajax> ... ajaxResponse: function(e, request) { var headers = request.xhr.getAllResponseHeaders(); } ...
How to create a new template instance in Polymer 1.0?
If you define a template like this: <template is="dom-template"> <h2>{{name}}</h2> <h3>...lives<h3> </template> you can generate an instance like this: <script> // construct the anonymous presenter var instance = templateInstance.stamp(); // the data model lives on the presenter instance.name = 'Instance'; // the nodes are available in `root` document.body.appendChild(instance.root); </script> This...
Having trouble applying a mixin in Polymer
--test-theme { is a property assignment, and has to be like so (added colon): --test-theme: { I'm not 100% sure why at this point, but simplifying: #story-card .story-content { ... to .story-content { ... fixes it when I run your test. http://jsbin.com/zozute/edit?html,output I'll follow up when I can explain this...
Conditional template on Polymer 1.0
Try to modify your conditional template like this: <template is="dom-if" if="{{show(index)}}"> And add this function to Polymer script: show: function (index) { return index != 4; } ...
Preselect a default page in iron-pages when using with paper-tabs
javascript,polymer,polymer-1.0
Since you're working with an auto-binding template, simply add a short script that sets the selected property of your <iron-pages> element at load time. For example (assuming you are using webcomponents-lite.js): <template is="dom-bind"> <div class="middle"> <paper-tabs class="bottom self-end" selected="{{selected}}"> <paper-tab>Page 1</paper-tab> <paper-tab>Page 2</paper-tab> </paper-tabs> </div> <div class="bottom"> <iron-pages selected="{{selected}}"> <div>...
Polymer 1.0 skip nodes with ExcludeLocalNames
Don't use excludedLocalNames in 1.0. Instead, set the selectable property on the selector to the names of the nodes you would like to allow selection for. Basically, it's a whitelist instead of a blacklist (which is a lot more reliable, too). For example: <paper-menu selectable="paper-item,div"> <paper-item>You can select me!</paper-item> <div...
Polymer & google cloud endpoints golang backend
google-app-engine,polymer,google-cloud-endpoints
Some notes: google-client-loader is the one you want Until a new release you will have to depend on #master (as you are doing already) since the root/apiRoot fix hasn't been released yet . With Polymer 1.0 camel-cased attributes become lowercase so passing in apiRoot would actually be an apirootproperty. What...
Static and dynamic class in the same element. Polymer
String interpolation is not yet supported on Polymer 1.0. However, you can use a computed binding for this. Polymer({ ... computeClass: function(someClass) { return someClass + ' my-static-class'; } }); And use accordingly: <div class$="{{computeClass(clase)}}"></div> ...
Inheritance of customized polymer element in version 1.0
The current workaround for the lack of inheritance in Polymer 1.0 are shared behaviors. You can try to extract the common behavior of both custom elements into a separate behavior which you implement in both of your custom elements: tile-behavior.html: <script> TiteBehavior = { properties: { label: String, icon: {...
How to style paper elements inside of a custom element (Polymer 1.0)?
I use import an external style sheet like: <dom-module id="ts-dashboard"> <link rel="import" type="css" href="ts-dashboard.css"> <template> <paper-tabs selected="{{selected}}"> <paper-tab>Choice 1</paper-tab> <paper-tab>Choice 2</paper-tab> </paper-tabs> <!-- some more elements... --> </template> </dom-module> <script> //Module definition here </script> Then this should work: paper-tabs { --paper-tabs-selection-bar-color: #ED1C23; } (Update: Just realized I...
How to validate only after leaving focus of paper-input (Polymer 1.0)
I was able to only validate my input after leaving focus by using the onfocusout attribute <paper-input id="zip" label="ZIP Code:" pattern="\d{5}([-]\d{4})?" error-message="This is not a valid ZIP Code" onfocusout="validate()"></paper-input> ...
how to execute a function on-close or on dismiss of paper-dialog for polymer 1.0?
javascript,polymer,web-component
paper-dialog inherits the Polymer.IronOverlayBehavior, which has the iron-overlay-opened and iron-overlay-closed events. <paper-dialog on-iron-overlay-opened="_myOpenFunction" on-iron-overlay-closed="_myClosedFunction"></paper-dialog> https://elements.polymer-project.org/elements/iron-overlay-behavior?active=Polymer.IronOverlayBehavior...
Polymer 1.0 - I cannot use class={{variable}}. How can I set class name dynamically?
Try class$="{{v1bg}}", as this will bind to the class attribute rather than the class property. https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding...
Duplicate values with Polymer template repeat
templates,polymer,repeat,web-component
The problem is that response is being treated as a global variable, so every time you're running through repeat, it is writing over it. As a solution, you should bind to something that would change each repeat. <template repeat="{{k in data}}"> <core-ajax url="http://api.soundcloud.com/tracks/{{k.track}}.json?client_id=9a6dccd301f1d1cbab751e0a1ec82e2e" method="GET" auto response="{{k.response}}" handleAs="json"> </core-ajax> <div class="item">...
How to two-way bind iron-input to dom-repeat's item?
javascript,polymer,polymer-1.0
Change to: value="{{item.value::input}}" See here: plnkr.co/edit/QWdCk7ReXxtdKndwPdqq
Change style programmatically
You've hit a bug in the current version of Polymer, where a style change like this will propagate to child Polymer elements, but not to the element itself. See: https://github.com/Polymer/polymer/issues/1851 The workaround is to call Polymer.updateStyles() instead of this.updateStyles(). Here's the updated codepen....
Setting width and height of svg in Polymer element
You can't use the properties in your css declaration. This is invalid and won't work. (edit: having done a quick google search, this seems to have been possible at one point and my have been removed for now. Hopefully someone else may be able to clear this up). Secondly, to...
core-animated-pages in Polymer 1.0
polymer,web-component,polymer-1.0
The new component is named neon-animated-pages and is a part of neon-animation Here is its documentation: https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages and repository: https://github.com/PolymerElements/neon-animation#page-transitions The animation-related elements that were part of core will be created as part of the neon product line. ...
How to Bind Attribute from Custom Polymer Element to angularjs
I believe it is best to use the angular-bind-polymer directive from here. The code is already written and it is working, so no need for you to implement it by yourself. Instructions from the aforementioned page: This will only work if the Polymer element publishes and reflects attributes. That is,...
paper-header-panel content div behaving erratically
Here might be your problem. <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> Try changing this to <link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html"> The previous one contains only the layout mixins (which is actually the recommended one), while the latter contains the layout classes (along with the /deep/ selectors) that you seemed to be using....
Why does the polymer property binding need a tag in my template?
Yep, that's working as intended. See https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-text-content. To bind to a child element’s textContent, you can simply include the annotation inside the child element. The binding annotation must currently span the entire content of the tag: … String concatenation is not supported inside a tag, and the tag can’t contain...
Browser compatibility of Polymer
cross-browser,polymer,compatibility,polymer-1.0
Only Chrome supports having custom element definitions inline in your main document. Other browsers currently do not have full and proper implementations of the new and upcoming standard. Take the pres-test element definition and move it into its own HTML file, then import it. Also, you only need to import...
How do I use dom-repeat in Polymer binding to a dictionary
What you have in the first example is correct for Polymer 1.0. Here is the documentation for the template repeat (dom-repeat). <template is="dom-repeat" items="{{data}}"> <div> <span>{{index}}</span> <span>{{item}}</span> </div> </template> ...
Icon list for Polymer
I was wondering the same and asked support in Github through the issues section. They gave me this link: Icon list for Polymer Here is the reply from one of the organization member: ...
Mobile App Performance : Polymer or Ionic?
javascript,cordova,ionic-framework,polymer,google-chrome-app
IMHO, I would go with Ionic, since it's has an awesome CLI, and they constantly improve already great docs. The things they're doing with additional services like push is just awesome. Also, one thing they said will be coming is the ability to publish through them, so you won't have...
Are there any built in auto-complete input components for Polymer 1.0?
For now, I've settled on using HTML5 datalists in conjunction with a modified <paper-input> control (I've submitted a pull request to the Github repo to merge those changes back into the master branch). All those changes do is persist the list attribute to the inner <iron-input> control so that it...
Polymer 1.0 passing JSON string as proprty
arrays,json,polymer,polymer-1.0
You're actually on the right track! Here's how you can declare an array property: properties: { max: {type: String}, data: { type: Array, // Available property types are String, Number, Boolean, Array, and Object value: [] // Default value } } On your data-binding template however, you have to make...
How to declare and bind to properties with type=“object” in Polymer 1.0
You have a series of problems here. First, kevlar: { color: 'red' price: 1.25 }, ^ this is improper object syntax, name/value pairs must be separated with commas. Second, your code expects the property material to be three things. material is bound to iron-selector.selected which makes it the name of...
Polymer 1.0 strange behaviour on properties
There's a few things I think I can help you with here. First, you can make your JSON much more readable by using single quotes for your attributes. Additionally, you can include white space, if you are hard-coding the JSON: <fighter-profile fighter='{ "country":"USA", "countryFullName":"United States", "name":"Frank Mir", "nickname":"", "zuffa_record":{ "wins":"15",...