polymer

How to use a template without a shadowRoot?

孤街醉人 提交于 2019-12-12 04:53:44
问题 I expected one of the two togglePanels() to work but they do not? <template> <core-drawer-panel forceNarrow> </core-drawer-panel> </template> <script> var t = document.querySelector('template'); t.querySelector('core-drawer-panel').togglePanel() t.shadowRoot.querySelector('core-drawer-panel').togglePanel() </script> Also note that in my console it says #document-fragment instead of #shadowRoot because I can not wrap it in a polymer element, so that the other js frameworks do not break. EDIT:

Polymer2.0- Trying to download DIV content of custom element

三世轮回 提交于 2019-12-12 04:47:55
问题 I am trying to download div content of custom element using document.getElementById of the div and trying to implement download option from the JS FIddle - http://jsfiddle.net/evx9stLb/ From console, I am getting below error pen.js:6 Uncaught TypeError: Cannot read property 'innerHTML' of null at download (pen.js:6) at HTMLButtonElement.onclick (index.html:15) HTML: <head> <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/"> <link rel="import" href=

Understanding two-way databinding in Polymer

孤人 提交于 2019-12-12 04:42:19
问题 I'm new to polymer, and I've been reading the docs and playing around with it a little bit, but I'm having some difficulty understanding the difference between the [[]] one way data flow, and the {{}} two way data flow. Can anyone help me understand the difference? 回答1: For example handing data from one element down to one of it's child elements is considered one-way-data-binding. If this data get's modified in the child element the change is also reflected in the parent. This is made

“Uncaught Reference Error: Polymer is not defined” caused by IP-change?

一笑奈何 提交于 2019-12-12 04:39:19
问题 so I didn't touch my current project for almost one month and after that, nothing is running anymore and I get the message Uncaught Reference Error: Polymer is not defined for each of my Polymer-Elements and this one once: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/bower_components/tools/loader/loader.js Uncaught ReferenceError: PolymerLoader is not defined I have Polymer included in my main html-file like this: <script src="bower

Polymer: gulp error at build time: merge-stream

独自空忆成欢 提交于 2019-12-12 04:32:10
问题 I'm trying to run gulp to build my app like Rob Dodson explains here, but I get the following error: module.js:327 throw err; ^ Error: Cannot find module 'merge-stream' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/Users/path/to/gulpfile.js:16:21) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10) at

How to Load Square Payment Form in Shadow DOM

隐身守侯 提交于 2019-12-12 04:31:31
问题 I am trying to create a Web Component for the Square Payment form, but am having trouble getting it to load into the shadow DOM. I am wondering whether or not this is possible, since the form is populated with a script from the Square CDN. Has anyone had any luck with this use case? I am using code from an example on https://docs.connect.squareup.com/articles/adding-payment-form and inserting it into a Web Component template. The full code example is on Codepen. https://codepen.io/kvnapavl

Polymer leaflet maps distortion

对着背影说爱祢 提交于 2019-12-12 04:17:02
问题 I'm new with polymer and leaflet.js, when try load the map this is distortionated my code <link rel="import" href="../bower_components/polymer/polymer.html"> <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> <dom-module id="my-view4"> <template> <style is="custom-style"> #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> <div id="map"></div> </template> <script>

Polymer 2.0 - bootstrap classes are not working

不想你离开。 提交于 2019-12-12 04:14:16
问题 I am trying to use bootstrap CSS classes with polymer2.0 but it is working HTML: <head> <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/moment-js+saeidzebardast+0.7.2/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="moment-js/moment-js.html"> </head> <link rel="import" href="polymer/polymer-element.html"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com

observeNodes for distributed content

痴心易碎 提交于 2019-12-12 04:09:45
问题 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

Polymer: access polymer element objects

穿精又带淫゛_ 提交于 2019-12-12 04:06:20
问题 I have a polymer element called his-service: <polymer-element name="gis-service" attributes="response url"> <template> <style> </style> <core-ajax id="ajax" auto url="{{url}}" method="get" contentType = 'application/json' on-core-response="{{postsLoaded}}" body="{{body}}" handleAs="xml"> </core-ajax> </template> <script> Polymer('gis-service', { created: function() { this.response = []; }, postsLoaded: function() { this.response = []; this.labels = []; this.coordinates = []; x = this.$.ajax