polymer | 易学教程

Should my <script> be inside my <dom-module>?

阅读更多关于 Should my be inside my ?

问题 I've been developing with polymer and I've always put my <script> tags inside my <dom-module> tags. E.G: <dom-module id=""> <template> <style> </style> </template> <script> Polymer({}); </script> </dom-module> But I've also seen the <script> tags put outside of the <dom-module> tags. E.G: <dom-module id=""> <template> <style> </style> </template> </dom-module> <script> Polymer({}); </script> Both ways seem to work fine. Which way is considered correct though? Can you explain? 回答1: The dom

Polymer paper-input and form submission

阅读更多关于 Polymer paper-input and form submission

问题 I'm working on a forum theme and started using web components but the form elements don't work. I have stuff like this: <input type="text" name="subject" maxlength="85" value="{$subject}" tabindex="1" /> and I tried translating it like that <paper-input floatinglabel="" label="{$lang->thread_subject}" type="text" name="subject" maxlength="85" value="{$subject}" tabindex="1"></paper-input> and all kind of variations also nesting the element inside but it doesn't work. Same goes for all other

Bootstrap styles not applying within a Shadow DOM on Chrome 35

阅读更多关于 Bootstrap styles not applying within a Shadow DOM on Chrome 35

问题 I've working with Bootstrap 3.1.1 and Polymer 0.2.4 for a long time and, suddenly -it may have been since the last Chrome auto-update (Version 35.0.1916.114)- Bootstrap stopped styling Shadow DOM elements. I've been able to check that the CSS classes within those nodes do not appear when inspecting the (Shadow) DOM with Chrome DevTools. In other browsers, such as Firefox, it is still working. I don't know whether this is something I'm missing or some kind of bug, but this odd styling

Testing polymer 1.0 components with iron-ajax using wct

阅读更多关于 Testing polymer 1.0 components with iron-ajax using wct

问题 I am having the hardest time mocking the server response to an iron-ajax component inside my custom component. Here is my code files. custom-component.html: <link rel="import" href="/iron-ajax/iron-ajax.html"> <link rel="import" href="/internal-component/internal-component.html"> <dom-module id="custom-component"> <template> <iron-ajax url="staticFile.json" auto handle-as="json" last-response={{ajaxResponse}}></iron-ajax> <template is="dom-repeat" items={{ajaxResponse}} sort="_sort" id=

“core-header-panel” doesnt seem to work out-of-the-box

阅读更多关于 “core-header-panel” doesnt seem to work out-of-the-box

问题 I was trying some core polymer elements, and I have been having trouble using core-header-panel in my demo. I think the toolbar is right, because I managed to do another demo where it was working with minimal CSS. But all the demo I found for core-header-panel seems to take most of the layout configuration outside the component (Which kinda seems like the point of the component). Did I misinterpret something here? 回答1: The best pattern today is to use the polymer layout attributes. <body

Passing custom CSS to Polymer element

阅读更多关于 Passing custom CSS to Polymer element

问题 I would like to be able to pass CSS width to my custom element's shadow DOM. The custom element, called my-list , is defined as below: <dom-module id="my-list"> <style> #container { width: var(width, 100%); } </style> <template> <div id="container"> <content></content> </div> </template> <script> Polymer({ is: 'my-list' }); </script> </dom-module> It is used like this: <style type="text/css"> .medium { width: 500px; } </style> <my-list class="medium"> <list-entry>1</list-entry> <list-entry>2<

SVG <use> tags within Polymer dom-repeat

阅读更多关于 SVG tags within Polymer dom-repeat

问题 I'm iterating over an object using dom-repeat, and want to reference different icons from an SVG sprite sheet with each iteration. To add an icon, I'm trying to use the <use xlink:href="sprite.svg#id"> method, mixed with Polymer's computed bindings. Here's the code inside the dom-repeat block: <template is='dom-repeat' items="{{currentPlan.functionalities}}"> <div class="resourceRow rowParent"> <div class="functionIconContainer columnParent"> <svg><use xlink:href$="{{ _getIconURL(item.id) }}"

How to work with app-localstorage-document in Polymer

阅读更多关于 How to work with app-localstorage-document in Polymer

问题 I am trying to figure out how to set and retrieve a value in the app-localstorage-document. I worked before with the iron-meta element and did it like so: <iron-meta id="meta" key="id" value="{{meta}}"></iron-meta> Polymer({ is: 'login-form', properties: { meta: { type: String, value: '' }, }, getValue: function() { this.meta = '100' var savedValue = this.$.meta.byKey('id'); console.log(savedValue); } }); But when I try something similar with the app-localstorage-document it just returns:

How can I replace the server in Web Component Tester

阅读更多关于 How can I replace the server in Web Component Tester

问题 I have a project set up based around the Polymer Starter Kit, which includes Web-Component-Tester This project includes php server code which I would also like to test by writing tests to run in the browser which will utilise the PHP server code through Ajax Calls. This implies replacing the server that Web Component Tester is using ONLY when testing server side code. I hope to make a separate gulp task for this. Unfortunately, I don't understand the relationship between WCT, Selenium and

Polymer core-ajax cross domain issue

阅读更多关于 Polymer core-ajax cross domain issue

问题 I am trying to do a cross domain call using Polymer and the core-ajax component. I keep getting back No 'Access-Control-Allow-Origin' header is present on the requested resource. My code for the component is below <core-ajax id="ajax" auto url="http://api.meetup.com/2/event_comments/?key=MyKey&event_id=191593992&callback=?" on-core-response="{{commentsLoaded}}" method='GET' contentType='text/javascript' handleAs="json"> </core-ajax> If I use jQuery and the following snippet, it works $