What about 3rd party JavaScript? #AskPolymer -- Polycasts #44

Key Takeaways

PC2 intro take one marker hey there play casters Rob here welcome back to another segment of ask polymer the show where you send in questions on the various social media networks out there and I do my best to answer them okay our first question comes from danger Manley who asks for elements that contain iron Ajax uh how can we mock their behavior so interesting question there web component tester itself ships with a few clever tools that can perhaps help you out here the first is a function called stub element and you can use that to actually replace an element that is like inside of other elements you could say stub element iron a Jacks and then as the second argument you could pass in like fake iron a Jacks you can actually create your own mock element that'll swap in right before it does the unit test that is one approach uh the other is to use something like sinon's fake xhr server so that also ships with web component Tester the the sonon command is is there for you so you can create a a fake xhr server actually have it send back fake responses and that way you don't have to you know spin up a server yourself or anything to like feed your your test data you can just use this little mock server and feed data to iron Hax that way so uh two options there if you're curious we actually have a video that maybe goes a little bit more into this it's from a a talk at polymer Summit by one of our team members so you can check that out over here uh our team member Chris who created the stub element stuff uh he actually gave a whole talk on this stuff so go check that out if you're interested uh thank you danger for that awesome question okay our next question comes from Alan who asks if I'm using something like iron list I'm scrolling through thousands of items how do I know how do I detect when the user has scrolled to the bottom of the list so that is a very good question today it's a little tricky to do that but the team is building an element called iron scroll threshold so you can combine that with an iron list and that way use a little data binding and it'll alert you when the user has hit the bottom of the list that way you know if you have a million items in your list but you only want to load the first 100 at a time the user can scroll down to that first 100 then you can you know get that binding event you can then go lazy load another pack of 100 items and sort of keep going that way you can build like kind of a good infinite scrolling experience uh so yeah using iron scroll threshold I'll I'll link it down in the show notes and you can combine that with your iron list and hopefully get that kind of cool smooth infinite list experience that you're after all right our next question comes from Cody who asks how do I load external Javascript Frameworks into my components so this is sort of a tricky bit here uh I think Cody was asking how do I load like jQuery into my element so I can use it for selecting stuff inside of my component in general we recommend not trying to use things like jQuery inside of your element definitions it it creates two issues one it means that anybody using your component is going to have to also depend on jQuery but it also is tricky because jQuery right now doesn't really know how to work with Shadow Dom and so you could end up in weird situations where you're trying to select stuff and it's not quite working and it's not clear why so in general we recommend just sticking with vanilla JavaScript inside of your element for you know specking out its definition you can however depend on external libraries that do things like momentjs is a good example something that like converts time stamps for you things that aren't interacting with the Dom necessarily you can load those in using uh HTML Imports you can create an import for one of those libraries that just contains a script tag and Pull It in that way so that's totally acceptable but Frameworks that want to manipulate the Dom probably want to stay away from using those inside your element definition so uh thank you Cody for that question okay our next question comes from Tom who asks what should I keep in mind when styling CSS for web components so I think the main thing to keep in mind is you're working with Shadow Dom and if you're not familiar with it it can be sort of tricky because it creates this sort of Style bubble around around your components I think it's really useful to learn how to work with custom properties and how to work with CSS Mixon both of those are features which polymer uses pretty heavily to allow you to you know jump over Shadow boundaries and and style the internals of components without having to like violate encapsulation and know what's going on there uh internally directly so if you're not familiar with those things that I just said if that just sounded like a bunch of crazy words and you can go check out this guide over here that we've created on how you style the shadow Dom which we actually sometimes refer to as local Dom so the guide is styling local Dom you go check that out that'll explain custom properties that'll explain CSS Mixon and a lot of the things that you need to keep in mind when you're trying to style your first web components so uh thank you Tom for that question all right the last question comes from alos who he actually asked a lot of questions but he asked when are carbon elements coming and when will we get es6 with polymer so carbon elements we're still working on those we don't have a definitive release date for that just yet but we're hoping you know maybe in the next one or two quarters those should start to roll out es6 in polymer that's something that I think we really want to work on this year we want to make sure that uh everyone can write their component definitions using all the latest and greatest es6 syntax So within the team we are actually working on some tools which we're hoping to release again probably in the next couple quarters uh to let people start to use es6 with their component definitions so I know it's sort of a bummer to to say like you know it's coming wait on it but this is stuff that we actively working on right now we we just finished a bunch of meetings talking about both of these topics uh so look forward to more on both of those fronts in 2016 okay so uh thank you everybody who sent in questions lots of really great things this week if you out there if you yourself you got some questions for me you can leave them down below in the comments or you can ping us on a social network of your choosing at # askpolymer as always thank you so much for watching and I'll see you next time a lot of good questions today thank you everyone who sent in some stuff what why is everybody laughing take two thank you all who sent in some stuff sorry take three Special Agent Cody Weaver sounds like a cool detective name