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...
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...
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...
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,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. ...
It was just a typo. I misspelled the template name.
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...
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...
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....
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) } ...
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...
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...
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(); } ...
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...
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...
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....
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
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)...
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="">...
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...
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...
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: {...
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>...
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...
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...
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....
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({...
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...
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...
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...
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;...
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....
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...
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...
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> ...
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...
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">...
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...
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.
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...
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....
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);...
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...
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...
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...
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> ...
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...
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...
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,...
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: ...
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...
javascript,polymer,polymer-1.0
Change to: value="{{item.value::input}}" See here: plnkr.co/edit/QWdCk7ReXxtdKndwPdqq
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; } ...
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...
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...
<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> ...
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...
You have to change queryMatches="{{}}" to query-matches="{{}}".
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...
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> ...
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' }); ...
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...
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> ......
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.
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)}}">...
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>...
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...
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...
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...
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> ...
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...
javascript,events,polymer,paper-elements
It appears to inherit iron-overlay-behavior which fires the iron-overlay-opened and iron-overlay-closed events.
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:...
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> ...
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....
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> ...
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...
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...
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'); } });...
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>...
Polymer 1.0 does not support this at the moment - as explained by @kevinpschaaf in Github https://github.com/Polymer/polymer/issues/1778.
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",...
--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...
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...
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,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...
I suspect this was fixed here https://github.com/PolymerElements/paper-toolbar/issues/24.
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">...
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...
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...
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> ...
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...