Lazy Loading Elements -- Polycasts #43
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about programmatically importing, prefetching, or lazy loading Polymer elements.
Recommended by 2 people across 2 different months, 2016 to 2017.
What it is
A short episode of Google's Polycasts series in which Rob Dodson shows how to lazy load Polymer 1.0 elements using the importHref method. It covers loading only what is needed for first paint and demonstrates the approach with a code sample.
What people said
Recommends Ben Thomas · 2016-05 · Stack Overflow · on “Programatically import and attach polymer element with iron-ajax”
Have a look at this video [this video] . It explains lazy loading of Polymer elements and should help in your case.
Recommends alesc · 2017-01 · Stack Overflow · on “Prefetching imports in Polymer?”
Be aware of certain limitations on `prefetch`. I think IE only prefetches 10 or so links and ignores the rest. Also, load only what you really need for the first paint and then lazy load everything else. I think this [this video] video covers most of it.
Cites crazypeter · 2017-11 · Stack Overflow · on “Best Practice in separating javascript from HTML in Polymer 2.0 components”
Here is how to externalize JS and CSS. <link rel="import" href="../bower_components/polymer/polymer-element.html"> <dom-module id="your-element"> <link rel="import" type="css" href="your-element.css"> <template> </template> <script type="text/javascript" src="your-element.js"></script> </dom-module> Your class gets defined in the global scope and the JS files gets imported only once because of the HTML import deduping. When executing the JS code, it will find the corresponding <dom-module> . Also, don't forget customElements.define(YourElement.is, YourElement); in your JS file. Note that <script ...> can be inside or outside the <dom-module> , and the CSS imports must be outside the template