polymer-1.0

问题 Let's say I have an element that has an insertion point inside. <dom-module id="some-el"> <template> <content id="con"></content> </template> <script> (function () { Polymer({ is: 'some-el', ready:function(){ var placeholder = Polymer.dom(this).querySelector('div[id*="placeholder"]'); this._observer=Polymer.dom(placeholder ).observeNodes(function(info){ console.log(info.addedNodes) }); } }); })(); </script> </dom-module> and in DOM it looks like this where #placeholder... is a spinning wheel

问题 Why current target on-tap is different using paper-button with iron-icons and paper-button without iron-icons ? <dom-module id="button-tap"> <template> <paper-button on-tap="_getData">without icon</paper-button> <paper-button on-tap="_getData"><iron-icon="icons:thumb-up"></iron-icon> with icon</paper-button> </template> </dom> The current target is paper-button if not using iron-icons (child element). How can I get paper-button as current target if using a child element? codepen.io 回答1: If

问题 I want to create a custom element that takes a JSON object as input. <activity-tracker activity='{"title": "Lord Meowser", "description": "lala"}'></activity-tracker> The element itself looks like this <dom-module id="activity-tracker"> <style> :host { display: block; box-sizing: border-box; } </style> <template> <p>{{activity}}</p> <p>{{activity.title}}</p> </template> </dom-module> And the property binding properties: { activity: { title: { type:String, value: '...' }, description:{ type

问题 The polymer docs aren't clear on how to create a multiple toggle using iron-collapse. Is there an easy way to get each item to toggle? I had a look at multiple iron-collapse not working, expands only first but I could not get it to work. Maybe something has changed in polymer since then. Below is an example of the code I am using. <div on-click="toggle"><paper-item><a class="paper-item-link"><strong>List Items</strong></a></paper-item></div> <iron-collapse id="collapse"> <div>Content</div> <

问题 When initializing a property to an object or array value, use a function to ensure that each element gets its own copy of the value, rather than having an object or array shared across all instances of the element. this is from the official polymer document my question here is why to not to share this default value across multiple instance as this default value will only be called once during initialization ?? <dom-module id="title-element"> <template> <h1 style$="background-color: {

问题 I had a wokring app with some :host styles on custom elements built with Polymer 5.5. Now, I'm converting this to Polymer 1.0 but run into this weird issue: Styles defined with :host are not applied. For testing purposes I took the example right from the documentation: <dom-element 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>

问题 Here is my jsBin. The parent-element sets the value of the --custom-color property in the child-element . I want to get the value of that property from the JS in the child-element . Here is the documentation but I can not find it mentioned anywhere in there how to do this. Please provide a working example (jsBin) with your answer. <h4>http://jsbin.com/kevanicebu/edit?html,console,output</h4> <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> <dom-module id=

问题 I have a simple Polymer element, that I use in a dom-repeat template. <link rel="import" href="../../bower_components/polymer/polymer.html"> <dom-module id="flow-element" attributes="name kind"> <template> <paper-material class="flow" elevation="1"> <span> //delete button <paper-button class="delete" on-click="handleClick({{name}})"> <iron-icon icon="delete" ></iron-icon> </paper-button> </span> <paper-item id="name">{{name}}</paper-item> <paper-item id="kind">{{kind}}</paper-item> </paper

问题 Using the Polymer Stater Kit, I created two custom elements : flow-list.html (here is declared the flowElementArray ) flow-element.html (here is defined the delete function) In the app.js file, I also defined a addElement function. I can add elements to the flowElementArray , and they are displayed. BUT, when I remove elements from the flowElementArray , they are still displayed. Here is how I got the following result : App start (2 items pre-loaded) I delete one item (the item stays on the

问题 I want to make Hello, world with the Polymer firebase-collection element. I expect to see one or more repetitions of Hello, world and no errors in the console. Instead, I see no Hello, world and many console errors beginning with: console.log ReferenceError: Firebase is not defined To recreate the problem, follow these steps: Open this jsBin. ❌ Observe no Hello, world and errors in the console. Notice the <firebase-collection> code is simply a copy/paste from the official documentation