polymer

问题 I'm building a custom element to mark up examples (play with it at http://jsbin.com/kiboxuca/1/edit): <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/platform.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/polymer.js"></script> <polymer-element name="my-example" noscript> <template> <style> :host { display: inline } </style> [ <em>Example:</em> <content></content> — <em>end example</em> ] </template> </polymer-element> <div> Some text <my-example

问题 In looking at Polymer, I see the following CSS selector in the Styles tab of Chrome 37's developer tools: I've also seen a selector with pseudo selector ::shadow . So, what do /deep/ and ::shadow in a CSS selector mean? 回答1: As Joel H. points out in the comments, Chrome has since deprecated the /deep/ combinator, and it gives a syntax error in IE. HTML5 Web Components offer full encapsulation of CSS styles. This means that: styles defined within a component cannot leak out and effect the rest

问题 I'm using polymer-jsonp to perform JSONP requests, but the response sometimes contains html. For example, supposing that post.content is "<strong>Foo</strong> bar" , how can I display {{post.content}} such that "Foo" is in bold? <polymer-element name="feed-element" attributes=""> <template> <template repeat="{{post in posts.feed.entry}}"> <p>{{post.content}}</p> </template> <polymer-jsonp url="url" response="{{posts}}"></polymer-jsonp> </template> <script> Polymer('feed-element', { created:

问题 I'm using polymer-jsonp to perform JSONP requests, but the response sometimes contains html. For example, supposing that post.content is "<strong>Foo</strong> bar" , how can I display {{post.content}} such that "Foo" is in bold? <polymer-element name="feed-element" attributes=""> <template> <template repeat="{{post in posts.feed.entry}}"> <p>{{post.content}}</p> </template> <polymer-jsonp url="url" response="{{posts}}"></polymer-jsonp> </template> <script> Polymer('feed-element', { created:

问题 Iterating over an array myarray=[1, 2, 3] works like this: <template is="dom-repeat" items="[[myarray]]"> <span>[[item]]</span> </template> How can I iterate over an object myobject = {a:1, b:2, c:3} ? 回答1: Here is a complete implementation: <test-element obj='{"a": 1, "b": 2, "c": 3}'></test-element> <dom-module id="test-element"> <template> <template is="dom-repeat" items="{{_toArray(obj)}}"> name: <span>{{item.name}}</span> <br> value: <span>{{item.value}}</span> <br> <hr> </template> <

问题 Context: I am working with polymer (0.2.4) on Maverics MacOX (10.9.2) & Chrome agent (34.0.1847.131) building up web components. Particularly, I am trying to partially enrich two components ( foo and bar ) included in other template by means of a content tag. The enrichment consists of adding new attributes for using them within their respective inner templates (lines (3) and (4)). I am not sure whether this approach will work properly which is what I need. But it gets me to the following

问题 I've successfully built a number of Polymer 2.0 elements and they run great in ES6 capable browsers. When I try to transpile them to ES5, the browser throws a bunch of errors, like these: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. After some research, it looks like you need a native-shim, which comes along with the webcomponentsjs-es5-loader, but after switching to that now I'm getting a new error: Class

问题 I tried adding it with like dropdownMenu.appendChild(menuItem) but as I expected this doesn't work. I couldn't find information about this on Polymer's guides nor other similar questions on here. Is that possible? If so, how? paper-dropdown-menu: https://elements.polymer-project.org/elements/paper-dropdown-menu 回答1: In Polymer, recommended way of manipulating the DOM is by manipulating the data: put the list of menu items in array: var items_array = [....]; -create the menu as: <paper

问题 I am trying some beginner tutorials to understand data binding with Dart-Polymer, but none of the examples are working. I am able to run the samples included in the project, so wonder what's wrong with my code. From the following link, here is my code : <!DOCTYPE html> <html> <head> <script src="packages/web_components/dart_support.js"></script> <!-- <script src="packages/web_components/platform.js"></script> not necessary anymore with Polymer >= 0.14.0 --> <script async src="packages/browser

问题 I have a Vaadin grid that I use. I make a put request to update the scores of the elements in the grid. I was wondering how to make the grid respond after the update to show the new information. Right now I have to refresh the entire page to show the new information. I'm not sure what code I would post, I'm using a basic vaadin grid if that helps. 回答1: I am not completely sure with what you mean by putting changes to the grid, but I suppose you are using setItems or a data provider? For the