polymer

I would like to be able to render a remote collection fetched with <core-ajax> as such: <rendered-collection url="/api/items"> <custom-element value="{{ _it_ }}"></custom-element> </rendered-collection> where <rendered-collection> would look something like: <link rel="import" href="/core-ajax/core-ajax.html"> <polymer-element name="rendered-collection" attributes="url" noscript> <template> <core-ajax url="{{ url }}" response="{{ collection }}" auto handleAs="json"></core-ajax> <template repeat="{{ _it_ in collection }}"> <content><!-- cannot be used like that unfortunately --></content> <

I have a parent component with two children components in an "iron-pages" component. The parent should switch pages when it receives an event from one of the children. The problem is, when the event arrives at the parent component, it executes the code to switch children but nothing happens. But, if the code is executed on the parent component itself, then it works. My question is: Why the parent component is unable to switch pages when a child sends an event? Below is the code for the two child components: // this is "child-comm.html" <link rel="import" href="bower_components/polymer/polymer

I am trying this to central justify the paper card heading: paper-card [heading]{ @apply(--center-justified); } but it does not seem to help. kindly suggest heading is not an attribute so you cannot write like that. You basically need to style the .title-text element inside the shadow dom, so use this instead - paper-card::shadow #shadow .header .title-text { display: flex; justify-content: center; } Or use the polymer iron-flex-layout - paper-card::shadow #shadow .header .title-text { @apply(--layout-vertical); @apply(--layout-center); } Update Thanks to @sfeast for pointing it out. Since

I'm new to this framework and would love to see some useful and simple examples of notify and reflect to attribute properties being put to use. Please keep the examples simple or add explanation for whatever code you provide. Notify: can be set to True|False. Let's say you have parent-element and child-element . Working example parent-element.html: <dom-module id="parent-element"> <template> <child-element foo="{{test}}"></child-element> </template> <script> Polymer({ is: "parent-element", properties: { test: { value: "bar" } } }) </script> </dom-module> As you can see, we have 1 property

Dynamically created html import inside a polymer element Does anyone know how to dynamically add a html import into a polymer element (version 1.0)? The code below doesn't seem to work and complains that the.. HTML element <link> is ignored in shadow tree. Does anyone know any way around this or know a better way? <!-- here is where the created import could go --> <dom-module id="my-component"> <!-- here is where I'd ideally like the import to be created --> <template> <div id="container"> <!--This is where my dynamically loaded element should be placed--> </div> </template> <script> Polymer(

In my application I am using polymer's paper-dialog element. The dialog's styles always position it in the center, but I want it to have a minimum distance set between the dialog and the right side of the window, so when the window shrinks, the paper-dialog won't get closer to the right side, than the set distance. Is there any way that I can do it with CSS, or shall I use some other technic? if you want to specified a distance between the dialog and the right side you might want to affect the property right of your paper-dialog with a fixed position like following : html /deep/ .dialog-right

I cannot seem to find an easy way to copy all the files from Polymer to using grunt-bower-task . grunt.initConfig({ bower: { install: { options: { targetDir: 'wwwroot/lib', layout: 'byComponent', install: true, copy: true, verbose: true, cleanTargetDir: false, bowerOptions: {} } } } I understand that only the main files defined inside each element's bower.json file get copied over. I am also aware that I could put a exportsOverride section in my own bower.json to include more files like this - "exportsOverride": { "*": { "": "*.*", "demo": "demo/*.*", "test": "test/*.*" } } But this doesn't