Thinking in Polymer (The Polymer Summit 2015)

What people said

Strong rec Salah Saleh · 2015-08 · Stack Overflow · on “Persistent session variable in Polymer 1.0”

I have two elements that are not directly connected (no host child relationship). I want to share some information between them as two-way data binding is not optimal. I thought about persistent session variables (like that exist in Meteor), is there is something like that in Polymer 1.0? If not, can somebody refer me to a viable solution. Edit: I just found out about iron-signals [this video] but the documentation states that it should be avoided, can somebody explain why it should be avoided? I would also appreciate it if somebody wrote an example of how to use it through an example. Edit: I discussed this question with the Polymer team in the Polymer Summit 2015. It was a part of a larger ques

Recommends Srik · 2015-10 · Stack Overflow · on “Polymer 1.x iron localstorage strange effect”

You have to use mediator pattern to share the sessionUser between test2-element and test-element. You can learn more about mediator pattern in the video: [this video] Also its better to name your property to sessionUser rather than session_user. You can access the property in html as session-user. <test2-element id="storage" session-user="{{sessionUser}}"> <test-element session-user="{{sessionUser}}"></test-element> </test2-element> You can solve your problem with two different approach. Approach 1: Listen to change in sessionUser in test-element and make the ajax call. <dom-module id="test-element"> <script> addEventListener('WebComponentsReady', function() { Polymer({ is: "test-element", proper

Recommends Ümit · 2016-02 · Stack Overflow · on “Binding to global variables in Polymer”

IMHO the most sane and maintainable pattern is a one way data flow approach (something along the lines of Flux [LINK] or Redux [LINK] (which is a bit simpler). There is one global state object that exists as as a graph structure and the data flows down your component tree (starting with the root component). Each component has well defined input properties and receives data from the parent component (using data-binding) and passes on parts of the data to its children. When a component changes state, it fires an event which bubbles up the component tree up to your root component that can then update your global state object (which again flows down your component tree), communicate with the bac

Recommends Ümit · 2016-08 · Stack Overflow · on “With regards to Polymer, How do I get one web component to 'speak' to another web component?”

There are basically two ways to do it: Use the mediator pattern [this video] . This works well if you have a parent element that contains both your my-grid and foo-form element. A solution can be found here [LINK] If you want to communicate between elements that don't have a common parent or different DOM branches, you can use iron-signals [LINK] which provies basic publish and subscribe functionality. Solution 1 is the recommended approach.

Recommends adaliszk · 2016-09 · Stack Overflow · on “How to get value of clicked item in custom polymer element”

You should use a parent element so you can pipe them trough polymer data binding [LINK] with a common property [LINK] . So your setup should look like this: Index.html -- parent-element (property: data) -- custom-obj1 (property: data) -- custom-obj2 (property: data) So if you change anything in the data binding it will be synchronized trough the parent element. More information to design apps and thinking in Polymer from Kevin Shaaf (Polymer Summit 2015): [this video] Of corse you can listen the property-name-changed event if you add the notify: true to it's property and you can give that to anything, but I suggest to use the Polymer Data Binding system.

Recommends Carlos Alberto Pereira Gomes · 2016-12 · Stack Overflow · on “How do I change the route from inside a view in Polymer?”

Your 'view1' could fire a custom event that would trigger a route change in your app. This would follow the observer pattern recommended in: Thinking in Polymer (The Polymer Summit 2015) [this video] Note: the answer to this [LINK] question may also help you.

Cites Arunabh Das · 2015-12 · Stack Overflow · on “Polymer input-header element does not have the expected behavior”

I followed the steps in the following video [this video] and created my custom input-header Polymer element as below <link rel="import" href="../../bower_components/polymer/polymer.html"> <dom-module id="input-header"> <template> <style> .dropdown-content { padding: 0px; } </style> <paper-toolbar> <paper-icon-button icon="mail"></paper-icon-button> <div class="title">{{label}}</div> <paper-menu-button horizontal-align="right" vertical-align="top"> <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button> <div class="dropdown-content"> <paper-input label="Thread name:" value="{{label}}"></paper-input> </div> </paper-menu-button> </paper-toolbar> </template> <script> Polymer

Cites Kayce Basques · 2016-02 · Stack Overflow · on “Polymer communication between elements”

To provide a concrete example to Scott Miles [LINK] ' comments, if you can wrap your parent and child elements in a Polymer template (such as dom-bind or as children to yet another Polymer element), then you can handle this declaratively. Check out the mediator pattern [this video] . parent element: <dom-module id="parent-el"> <template> <button on-tap="onTap">set message from parent-el</button> <p>parent-el.message: {{message}}</p> <content></content> </template> <script> Polymer({ is: 'parent-el', properties: { message: { type: String, notify: true } }, onTap: function() { this.message = 'this was set from parent-el'; } }); </script> </dom-module> child element: <dom-module id="child-el"> <temp

Cites Kayce Basques · 2016-06 · Stack Overflow · on “Polymer Progressive Web App, placement of CSS theming variables”

In keeping with the mediator pattern [this video] , I think you are best off creating a new, top-level element that represents your app. This is where your theming variables would be defined. The element that you previously called <my-app> should be renamed to something else. It's just a subcomponent of your app that changes depending on whether the user is logged in or not. You'd probably be fine defining it in index.html , but as time goes by you'll probably be happy that you have access to all of the full Polymer features. <my-app> // define your styles in this new top-level element <my-session> // styles defined in <my-app> cascade down to here <my-dashboard> // previously called <my-app>, ju