polymer,web-component , Adding CSS and JavaScript links to elements.html


Adding CSS and JavaScript links to elements.html

Question:

Tag: polymer,web-component

I'm new to Polymer and one of the things I like is that I can declare global CSS styling and Javascript libraries in the elements.html file. However, in the demos I have seen elements.html has been reserved exclusively for importing Polymer templates.

Is it bad style to overload elements.html with CSS and JS imports?


Answer:

No, there is nothing wrong about including JS and CSS files in the elements.html.

Think of elements.html as a non-ui web-component.

There is just one important thing to remember:
Polymer team has created a tool called Vulcanize which takes a file like elements.html which imports all the custom elements, to knit them together into a single file for reducing the number http requests the browser makes to gather the required resources. Adding JS and CSS files here will get this tool confused and generated rather odd results.

So this is exactly why you don't see official examples and tutorials include JS and CSS files in the elements.html.

More about Vulcanize:
https://github.com/Polymer/vulcanize
https://www.polymer-project.org/0.5/articles/concatenating-web-components.html

Hope my writing is clear.


Related:


how to execute a function on-close or on dismiss of paper-dialog for polymer 1.0?


javascript,polymer,web-component
Here is my code for polymer version 1.0. This is paper-dialog element i want to execute a function on closing this dialog. How can i do that? <paper-dialog id="paper-id" entry-animation="scale-up-animation" exit-animation="scale-down-animation" > <sample-element></sample-element> </paper-dialog> ...

Polymer 1.0 strange behaviour on properties


polymer
I'm just learning polymer (1.0) so please bear with me. I'm using express.js to return some array of JSON.stringified items and for-each them, so the result is as follows (in HTML): <fighter-profile fighter="{&quot;country&quot;:&quot;USA&quot;,&quot;countryFullName&quot;:&quot;United States&quot;,&quot;name&quot;:&quot;Frank...

How do I use dom-repeat in Polymer binding to a dictionary


polymer
I am trying to bind to data below which is a dictionary <template is="dom-repeat" items="{{data}}"> </template> I have found a similar question here Polymer: How to loop and render HTML to screen <template repeat="{{customer, i in customers}}"> <div>{{i}}, {{customer.name}}</div> </template> but I am not sure if this applies to Polymer...

Polymer 1.0 app-theme only affecting index.html and not on custom elements


css,polymer
I'm using the Polymer Starter Kit, and I wanted to move the scaffold into it's own element <main-scaffold>. There are styles in app-theme.html that applied to it before I moved it into from index.html into it's own element, but now none of the styles apply. This is the case for...

Polymer dom-repeat and displaying result of iron-ajax call


javascript,json,polymer
I have a feed of GP Practice addresses the start of which is as follows (not the whole feed which is over 16000 entries - still got to figure out paging) [{"Address1":"73 UPPER WICKHAM LANE","Address2":"WELLING","Address3":"KENT","Address4":"","Address5":"","CloseDate":"\/Date(-62135596800000+0000)\/","ContactName":"","ContactTelephone":"020 88541910","EmailAddress":"","LastUpdatedDate":"\/Date(1434749040000+0100)\/","Name":"(GPSI) DR AC...

Icon list for Polymer


html,polymer
The polymer starter kit makes references to <iron-icon> to implement icons. For example: <iron-icon icon="home"></iron-icon> I've checked the iron-icons section on the Polymer Catalog website, but the demo which should show all the icons is which is missing. Is there any other reference of all the icons in the <iron-icon>...

Using Polymer iron-ajax in repeating template


polymer
How do I load a json file and use the data in a repeating template? This code doesn't produce anything: <dom-module id="name-list"> <template> <iron-ajax auto url="names.json" handleAs="json" lastResponse="{{data}}"></iron-ajax> <template is="dom-repeat" items="{{data}}"> <div>First name: <span>{{item.firstName}}</span></div> <div>Last name: <span>{{item.lastName}}</span></div> </template> </template> </dom-module> <script> Polymer({...

Set focus for paper-input via radio button


input,radio-button,focus,polymer,paper-elements
In Polymer (1.0), how can I set the focus of the iron-input when (as example) radiobutton 'radio1' is selected. <div> <div>Title:</div> <paper-radio-group> <paper-radio-button name="radio1">Radio1Label</paper-radio-button> <paper-radio-button name="radio2">Radio2Label</paper-radio-button> </paper-radio-group> <paper-input-container> <input is="iron-input"> </paper-input-container> </div> ...

Inheritance of customized polymer element in version 1.0


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

polymer 1.0 data binding not working as expected


javascript,php,arrays,json,polymer
I'm trying to bind some data in a custom element but to no avail. I have a system-menu.html that has my custom element: system-menu.html <link rel="import" href="../../bower_components/polymer/polymer.html"> <link rel="import" href="../../bower_components/iron-menu-behavior/iron-menubar-behavior.html"> <dom-module id="system-menu"> <template> <template is="dom-repeat" items="{{data}}"> <li>{{item.name}}</li> </template> </template> </dom-module> <script> (function() {...

Polymer 1.0: Two-way bindings with input elements


javascript,polymer,custom-element
Code Consider the following Polymer custom element: <dom-module id="test-element"> <template> <input type="text" value="{{value}}"> <button>Reset</button> </template> <script> Polymer({ is: 'test-element', properties: { 'value': { type: String, reflectToAttribute: true, notify: true, value: null } } }); </script> </dom-module> I use this custom element in my index.html as follows: <html> <head> <script type="text/javascript"...

How to Bind Attribute from Custom Polymer Element to angularjs


javascript,angularjs,polymer
I created a custom element called my-slider-input which computes values from a user input. I need to take use these values in an angular controller. I'm wondering what's the best practice to do this? Given this polymer element: <dom-module id="my-slider-input"> <style> :host { display: block; } </style> <template> <button id="input1">Input...

google-signin don't return user info


polymer,web-component,google-signin,google-web-component
I am using google-signin element from Google Web Components, but I don't know how to return user info. <google-signin client-id="{{my-id}}" scopes="email profile" signed-in="{{signedIn}}"></google-signin> I tried to write some JS function but it didn't work. function (signedIn) { var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile(); console.log('Name: ' + profile.getName()); console.log('Image: ' + profile.getImageUrl()); }...

Why does the polymer property binding need a tag in my template?


javascript,html,polymer
I am trying to understand how Polymer renders properties in the template of a custom element. I'm seeing some behavior that I can't explain, where some properties are being rendered in one case (when surrounded by tags), but not in another (when tags are not present in the template). To...

Computed binding doesn't work with on-click (Polymer)


javascript,html,polymer
<template is="dom-repeat" items="{{myItems}}"> <div on-click="{{ComputedBindingFunction(item)}}">Foo</div> </template> This yields an error saying: listener method {{ComputedBindingFunction(item)}} not defined Shouldn't the function be executed, instead of literally trying to attach the function name with {{}}'s to on-click according to the docs? Note that ComputedBindingFunction returns a function....

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox


firefox,dart,polymer
I use Dart Polymer PaperDialogs containing CoreAnimatedPages. The idea is to have popups in which you can click through multiple option views. Example repository available at: https://bitbucket.org/neogucky/polymer-dialog-problem/ DialogView: view.html <link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="packages/paper_elements/paper_button.html"> <link rel="import" href="packages/paper_elements/paper_dialog.html"> <link rel="import"...

Polymer 1.0 data binding not working


data,binding,polymer
I have the following polymer element: The value of navigator.currentStep is not updating after someMethod is called. <dom-module id="m"> <template> Navigator step = <span>{{navigator.currentStep}}</span> </template> </dom-module> Polymer({ is: 'm', ready: function() { this.navigator = new Navigator(1); console.log(this.navigator.currentStep); // 1 }, someMethod: function() { this.navigator.next(); console.log(this.navigator.currentStep); // 2 } }); Output...

Inheriting dimensions only if they are specified on the parent element


css,web-component,custom-element
I'm developing a bunch of custom elements for an API using a web components polyfill and I've hit a snag. One of the elements may contain an <img> or <canvas> element. If no dimensions are specified for the custom element, it should be the default size of the child element....

Dropshadow from paper-toolbar overlays paper-dialog


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

core-animated-pages in Polymer 1.0


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

Computed bindings in auto-binding templates in Polymer 1.0


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

Polymer 1.0 services issue


polymer,web-component
I'm working on a reddit client using polymer to check out web compoments technologies. I started with the 0.5 version and got back on this project recently. That when I found out that polymer had the 1.0 released so I started over (as it wasn't that advanced anyway). I have...

Polymer Data-Binding will not replace


javascript,polymer,web-component
I have a polymer element that refuses to bind, and I can't figure out why. The rendered output is just sending the raw {{varName}} rather than replacing it with the appropriate value. However, formulas (with the [[fn(arg)]] syntax) and binding to tags (with the $="{{varName}} syntax) works fine. Any idea...

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
I have a paper-input-container next to a paper-icon-button and want to trigger the same function that is wired to the paper-icon-button's on-tap handler when a user hit's enter while the input has focus... anyone know how to do this. <html> <head> </head> <body> <dom-module id="example-stuff" > <style> :host { display:...

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


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

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


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

Having trouble applying a mixin in Polymer


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

Duplicate values with Polymer template repeat


templates,polymer,repeat,web-component
Okay any I have a strange thing happening with my polymer template <polymer-element name="my-playlist" attributes="info"> <template> <core-ajax url="/getlist" method="POST" auto response="{{data}}" handleAs="json"> </core-ajax> <style> </style> <core-selector class="list"> <template repeat="{{k in data}}"> <core-ajax url="http://api.soundcloud.com/tracks/{{k.track}}.json?client_id=9a6dccd301f1d1cbab751e0a1ec82e2e" method="GET" auto response="{{response}}" handleAs="json">...

Change style programmatically


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

How can I access item in parent repeat template while in filter


javascript,html,templates,polymer
<iron-pages> <template is="dom-repeat" items="{{fruit_categories}}" as="category"> <div> <template is="dom-repeat" items="{{all_fruits}}" as="fruit" filter="isThisFruitInTheRightCategory"> <!-- Some more stuff --> <span>{{fruit.weight}}</span> <span>{{fruit.age}}</span> <!-- ... --> </template> </div> </template> </iron-pages> isThisFruitInTheRightCategory: function(fruit){ return fruit.category === /* Q: How do I get the current category? */ } Suppose I...

polymer databinding performence


polymer,btle
I am trying to make an app that reads data from a device over btle and displays this data in a streaming graph. I want to do this with use of polymer. It would be nice to shield the complexity of btle. To have a html tag for btle that...

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


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

Polymer iron-form not working


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

Polymer 1.0 in Ember-cli, wrong appearance


javascript,ember.js,polymer,frontend,ember-cli
I have managed to integrate Polymer 1.0 to my Ember-cli project. This my Brocfile var vulcanize = require('broccoli-vulcanize'); var pickFiles = require('broccoli-static-compiler'); var mergeTrees = require('broccoli-merge-trees'); var EmberApp = require('ember-cli/lib/broccoli/ember-app'); var app = new EmberApp({ compassOptions: { sassDir: "app/styles/main", outputStyle: 'expanded' } }); //app.import("./bower_components/webcomponentsjs/webcomponents-lite.min.js"); var polymerVulcanize = vulcanize('app', { input:...

Polymer 1.0 - Issue selecting dynamic element by id


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

Click event not firing in polymer paper-icon-button


javascript,polymer
I have the following page defined <!DOCTYPE html> <html> <head> <title>Practice List</title> <link rel="import" href="elements/elements.html" /> <link rel="stylesheet" type="text/css" href="Styles/styles.css" /> <!-- google fonts definitions --> <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> </head> <body unresolved...

How to notify page transition with iron-pages


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

How to style Polymer's toolbar background in 0.5?


polymer,toolbar
I'm having issues trying to set the full background color of the toolbar in Polymer 0.5 when using core-scaffold. What I've tried so far on Stackoverflow only sets the left menu side, but not the right content side. How does one set the background color for the full toolbar? Below...

Dynamically adding and removing Event listeners


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

Change google-map center using Polymer


polymer
I'm working on a custom element using Polymer. I want to change its center after it was rendered. I can't found it on Polymer docs. Anyone could help me? <dom-module id="my-map"> <template> <google-map latitude="{{latitude}}" longitude="{{longitude}}" zoom="15"> </google-map> </template> <script> Polymer({ is: "my-map" // I want to change map center here...

Using dom-if for conditionals in arrays


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

Binding imperatively


binding,polymer
Is there a way to set up bindings imperatively. An example use case: var el2 = new MyElement(); el2.myProp = this.$.anotherElement.anotherProp That won't setup a binding, it just assigns the value or object. I'd like to find a way to do something like: el2.myProp.bindTo(this.$.anotherElement.anotherProp) Possible?...

Dart - Polymer Unit Testing. Not able to reference dom elements after click event


dart,polymer,dart-polymer
Not able to reference dom elements. Most of the test case works except for the last expectation in ClickSignInButton when I want to make sure I can evaluate error message div when form is submitted without any data. expect(document.querySelector('qme-header').shadowRoot .querySelector('#headerErrorDiv'), isNotNull); always fails and headerErrorDiv is null even though its...