Apparently, the CoreInput element in Polymer is still awaiting support for .focus() and .blur(), and there's a workaround in JS: https://stackoverflow.com/a/24496827/1286442
What's the Dart equivalent, so that I might focus my core-input?
Related
I need to use paper-range-slider element with displayFunction callback to customize the display content in slider.
In paper-range-selector v1.3 version support this feature, but it requires at least polymer v2.x, where as my polymer version is v1.3(paper-range-selector v0.2.7 is supported for this polymer version but displayFunction feature is not supported in it).
So i am trying to create custom-slider-element where it uses the paper-range-selector(v0.2.7) elements and add displayFunction feature and custom-slider-element can be used in my application.
Could any one tell me how to import behaviour of paper-range-slider to custom-slider-element? So that all the properties and methods added to custom-slider-element should directly pass to paper-range-selector.
I have two custom elements having similar functionality and both having an <iron-ajax> element(in local DOM template) to make service calls, I was trying to extract these common part into a behavior. But I also realize that polymer behavior does not carry local DOM template. Is there a way to let the behavior have the <iron-ajax>? dynamically create it using Document.create?
As "behavior" is the Polymer way of doing code sharing, can a DOM element be shared across elements?
You should create an other element for your API calls which have inside the <iron-ajax> and have your api call methods, then you need just change the iron-ajax element in your elements and use your <api-element> for this.
Below are two methods which i can think of
Create iron-ajax element at root level of your application and then refer to that element from each of your element using querySelector or getElementById on document
In your behavior create iron-ajax element from javascript with createElement function of javascript.
In both the cases you can add event listener on response and error.
Am I reading this right? If Shady DOM doesn't have event retargeting, does this mean if you need retargeting, and you support any browsers that don't have ShadowDOM (aka iPhones), you'll always have to do it manually? https://www.polymer-project.org/1.0/docs/devguide/events#retargeting
The problem I'm trying to solve is event communication between Polymer customer elements. I want some elements to be consumers of events, and others to be producers. However, browsers such as Safari are on our supported list, which I believe means they'll be using shady DOM.
So a code example, would go something like this:
<wut-action async remote="false" file="/actions/saveInventory.js">
<wut-button class="saveInventory">
</wut-button>
</wut-action>
I want to create a <wut-button> custom element that produces a doAction event on tap. And I want <wut-action> to consume the doAction event (listener). I assume because of bubbling, I'll need to do the composition as shown above.
I'm concerned after reading the docs that this design won't work. Thoughts?
In my tests, listening to events from distributed children is supported in both Shady and Shadow DOM. Your design would work across browsers. I verified this on Chrome 54, Firefox 49, and Safari 10.
Assuming wut-button fires an event named "x-event", wut-action could listen to that event like this:
Polymer({
is: 'wut-action',
listeners: {
'x-event': '_onEvent'
},
_onEvent: function(e) {
console.log('event', e.detail);
}
});
codepen
I am trying to use a js library across my elements with the help of core-shared-lib element. Apparently, I need to perform an operation as soon as the library loads, and the Polymer's ready event gets fired before the library is downloaded. Is there a way that I can bind an event to core-shared-lib element so that I can execute that library's functions.
Thank You
There is a on-core-shared-lib-load event according to docs. Try that
<core-shared-lib on-core-shared-lib-load="{{load}}" url="https://apis.google.com/js/plusone.js?onload=%%callback%%">
I was drawn to the idea of a "VanillaJS" approach mentioned by http://customelements.io/ for https://github.com/webcomponents/element-boilerplate . This drew me to http://www.polymer-project.org/platform/custom-elements.html (since I would like to do everything I can in JavaScript rather than use <link/> to do imports).
However, it seems that, contrary to the spirit of VanillaJS and polyfills, they seem to require their own custom "WebComponentsReady" event. (To me a polyfill is something which completely follows a standard or proposed standard, and lets you merely remove a script tag or load when it is fully supported and not need to change any other code.)
(Mozilla's x-tag (which is also not clear on whether it can be used purely as a polyfill or whether one requires the xtag global) uses a "DOMComponentsLoaded" event which I am not clear is standard.)
Neither event is mentioned at http://www.w3.org/TR/custom-elements/
Any way to work with these to use a standard event or avoid these otherwise without polling?
UPDATE
I see from http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0697.html that the "WebComponentsReady" event was discussed as being a candidate for specification but had not (at least at that time) been added, so I guess this event may be the safest bet since Mozilla's x-tag does use it internally immediately before firing its own "DOMComponentsLoaded" event and it was at least discussed as a possible candidate for standardization. :)
Neither event is part of the standards. Both Polymer's WebComponentsReady and x-tag's DOMComponentsLoaded are fired for convenience. This is one of those things you'd have to do yourself without a sugaring library. I suspect x-tag's fires hooks into the WebComponentsReady event because it uses the same set of polyfills as Polymer.
BTW, one reason to use an HTML Import (<link rel="import">) to load components is that you get aload` event. That could be one signal the component is ready.