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) } ...
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...
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...
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,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 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,...
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,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...
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:...
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...
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...
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...
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,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
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> ...
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,events,polymer,paper-elements
It appears to inherit iron-overlay-behavior which fires the iron-overlay-opened and iron-overlay-closed events.
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="">...
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....
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...
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...
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...
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...
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...
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...
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...
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">...
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...
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>...
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...
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...
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...
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...
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>...
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> ...
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: {...
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...
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> ...
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...
You have to change queryMatches="{{}}" to query-matches="{{}}".
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,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...
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....
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> ...
--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...
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">...
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> ...
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...
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'); } });...
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.
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...
javascript,polymer,polymer-1.0
Change to: value="{{item.value::input}}" See here: plnkr.co/edit/QWdCk7ReXxtdKndwPdqq
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...
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> ...
I suspect this was fixed here https://github.com/PolymerElements/paper-toolbar/issues/24.
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...
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....
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...
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...
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> ...
It was just a typo. I misspelled the template name.
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)...
<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> ...
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....
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; } ...
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...
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...
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,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(); } ...
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 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...
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;...
ruby-on-rails,ruby-on-rails-4,polymer,web-component
UPDATE (16 June 2015): An official package has been released for polymer-rails. Please see polymer-elements-rails, which is the new and official repository which includes iron-, paper-, and neon-elements. I will be keeping these forks up for the time being for anyone who may still have them already set as a...
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...
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...
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>...
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> ......
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...
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,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...
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)}}">...
There are several ways that you can achieve this, which can be used in combination with one another. Importing entire element collections If, during development and/or prototyping, you would like the convenience and flexibility of having access to all the different paper-elements and iron-elements at once, the element collection repositories...
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...
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: ...
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....
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 });...
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. ...
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....
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 does not support this at the moment - as explained by @kevinpschaaf in Github https://github.com/Polymer/polymer/issues/1778.
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>...
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...
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",...
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.