polymer-1.0

I do have several nested polymer elements created by myself. Currently with using polymers shared styles I'm able to inject custom styling into other elements. Unfortunately this approach is restricted to static use. So at implementation time I do need to know which Element should use which shared style by import the shared style module with <link rel="import" href="my-shared-style.html"> and <style include="my-shared-style"></style> . But in my use case I do need to inject shared styles into polymer elements at runtime. Is there any possibility to achieve this? UPDATE I tried following

I need to know when I can begin using my custom Polymer elements programmatically. The elements are still undefined even in my window.onload handler. Is there an established way of doing this correctly with Polymer 1.0? -Edit- I see there is a downvote, so let me clarify the issue. I have the following custom element definition: <link rel="import" href="../../bower_components/polymer/polymer.html"> <dom-module id="element-one"> <style> :host { display: block; background-color: blue; } </style> <template> <h1>Element One</h1> <content></content> </template> </dom-module> <script> var ElementOne

i use Polymer starter kit 1.0.2 and i'm trying to use iron-form based on (little) documentation i found. My method form is "post" and contain only one input. My form "action" is a PHP script (add.php) showing content of $_GET and $_POST: print_r($_POST); print_r($_GET); My form component (form_eclp.html) is: <dom-module id="my-form"> <template> <div class="horizontal center-center layout"> <div> <div class="horizontal-section"> <form is="iron-form" id="formGet" method="post" action="add.php"> <paper-input name="name" label="Name" required></paper-input> <br><br><br> <paper-button raised

Is there anyway how can I get query string in Polymer? http://localhost:8080/search?param=ppshein I want to get search?param=ppshein or param=ppshein in Polymer. I've tried to get query string in app-route but it display nothing. <app-route route="[[route]]" pattern="/:id" data="{{routeData}}"></app-route> [[routeData.id]] ** You could use <app-location>.queryParams : <app-location route="{{route}}" query-params="{{queryParams}}"></app-location> queryParams is an object containing key/value pairs of the parsed query parameters. Given http://localhost:8080/search?param=ppshein , queryParams

I have a problem of looping two of Polymers firebase-collection elements. With my database structure i first have to check which events the user has access to, then get the information on that event from events. The problem with this code is that when i loop the second firebase-collection the data-binding on "events" will be the same on all that repeats and therefore it will be the same name on every h4. So is there a way of having a unique variable in data="{{ }}". or is there a better way of writing out the data? <firebase-collection data="{{userData}}" location="{{_getCorrectUrl()}}"><

I'm trying to use the ripple effect on a clickable list of items but I'm facing the issue that the ripple effect goes all over the screen when I encapsulate that list into a custom element. It works great if I place it in my index.html but fails when I create a custom element that is included there. See an image of the issue: I've been reading similar questions where the answer is to make the container relative, which should be already done. So I'm wondering if it is required to set any special attribute in the host when using the ripple effect from a custom element. My example code is as

I can get my <iron-meta> instance to work properly when using a static value. But when I bind the value to a dynamic variable (using {{}} ) it <iron-meta> no longer behaves as expected. Does <iron-meta> support binding its value to dynamic variables? <iron-meta id="meta" key="info" value="foo/bar"></iron-meta> // works <iron-meta id="meta" key="info" value="{{str}}"></iron-meta> // fails Previous work This question is a refinement of this question in order to clarify that the ONLY thing causing the problem is the change from a static string value to a dynamic string value binding. I was

I'm doing migration from 0.5 to 1.0. While reading, I notice 2 different way on declaring attributes, using hostAttributes and properties . What are difference between those 2 ? Host attributes are attributes that do not match to an element's corresponding Javascript property (which you declare in properties ). This includes attributes like class , tabindex , data-* attributes, aria-roles, etc. To declare them during create-time, you must set them in the hostAttributes object. If you are going to bind values into them, you must use $= (which calls Element.setAttribute ) rather than = . Sources

Ultimately, I want to select individual states from this geochart . But this question is limited to getting the observer labeled _computeData to fire in response to mutating the array of selected states. Reproduce the problem with the following steps: Open this jsBin . Clear the console. Select the state of Texas. Note the console reads: You selected: Colorado,South Dakota,Texas which is expected per this line: console.log('You selected: ' + this.selected); // Logs properly However, I expect the console to also read: selected per this line: _computeData: function() { console.log('selected'); /