 Rob's been telling everyone facts about everybody else so I think it's only fair that we find out some things about Rob. When he was a baby he actually came he was baby number two in an episode of the Fresh Prince of Bel-Air. One of his cousins is world-renowned award winner Matthew McConaughey the actor and in high school he was on a wrestling team and his team name was the Velveteen Rabbit and one of those is actually true so good luck finding out which one. Hi everyone I'm Monica I'm not well off on Twitter and GitHub and all sorts of internet places and I make polymer elements I'm one of the few people who makes elements for polymer and before I used to work on polymer I used to work on chrome so I wrote a lot of UI and C++ and there's nothing that a grumpy compiler will make you appreciate more than CSS because in CSS we figured out how to separate what a thing does from how a thing looks like and this is really great because you can have your markup and you can have your HTML and figure out what a thing does and then spend all your all the time that you want on CSS and make it pretty and my favorite thing about CSS is that it's super open source and super available so you get to copy paste a lot of CSS because I still don't know how to vertically align things but thankfully somebody out there has figured it out and what ends up happening whatever you write apps is that you start with let's say an HTML button and HTML buttons are ugliest sin and they've looked the same for the last 20 years and you want to make them all shiny and pretty so you're gonna go and find a library it could be bootstrap it could be material design you're gonna find something that makes your button pretty and then the only way we know how to use CSS library is is that in order for us to make this button pretty we put a we slap a class on it in this case let's say it's fancy so we're super happy now our app looks great everything's shiny it's great but our app keeps growing and later on we're gonna have a different button and it's super good we've figured this one out we're gonna find a library it's gonna make sure really pretty but unfortunately the library that we're using also wants us to use a fancy class on this button and now we have a little bit of a problem because we have two buttons that are supposed to look different but are actually using the same class name so you have no idea what they're actually going to look like and this is pretty tragic and the root problem is that CSS really has no opinion about scoping everything's global everything's everywhere classes everybody can have a class and the only opinion it sort of has that you should name things really well and names aren't really computer as like a computer science people that's not a thing we really like we have to trust these library owners to name their things really well so that we can use them that's kind of sketchy so thankfully the shadow DOM came around and the shadow DOM was really great because what it does is it builds it lets us actually have encapsulation for styles and style encapsulation is super good because now your styles don't leak so the way I like to think about the shadow DOM is that it's actually a tiny little castle so you take the DOM you've got this giant pile of markup and in one particular place you carve a little hole into that DOM and you put your markup and you put your styles and you close it down with with walls around it so now you've got a castle and that castle is basically your web component everything that it does and all its styles just live inside and they don't leak out and nothing gets in and this is super great so if you go back to my terrible example where we're trying to make this button fancy we can actually make this button into a web component and things get much better so this is how you would define a web component in Polymer you may have seen this and then somewhere in there it has a fancy class and it has a whole bunch of CSS but that fancy CSS just lives inside of this button it lives inside of this castle it doesn't go outside because you can see like I could style all the a links in this element and imagine this actually styled all the a links in your application oh you bananas right so this is really great it just stays inside this this particular element so in our original button instead of using these CSS libraries which are great these libraries should in fact use web components and then you can just drop this magical web component is gonna be a super nice button is super fancy button and everything is great because the promise of web components is that you can start with you can you just just drop in any elements and they're just going to work magically and you're not gonna have to do any effort about it look how simple that marked markup is is just a button and it does a whole bunch of things it looks really great and this is actually not very new so the platform has been using web components behind your back for a very long time we just haven't been able to do the same as developers which I think is cheating if you look at input type equals date which is my favorite example for this input type equals date is an input selector that has a giant date picker associated with it and you can do all sorts of things to style the input itself you can change its color you can change its font it's gonna turn red and giant but there's really nothing that you can do to actually style that drop down there's there's a couple like sketchy WebKit pseudo selectors that started with like WebKit and weird Collins which kind of make you like that you change like the font size but not the entire thing itself and the reason is if you actually look at the markdown the markup I keep saying markdown is all markdown if you actually look at the HTML for input type equals date you don't see anything about a picker you don't see anything about a drop down you just see input type equals date and that's because that entire square is in the shadow dump it actually lives inside the inputs castle and that's why you can't get to it so this is kind of glorious because on one hand you've never had to worry about creating an ID called picker or using a classical date picker and this magically having the side effect of making your drop down less hideous on the other hand your drop down is always really hideous and you can't really fix it and it doesn't match any of the other styles in your application so how do we do this we're polymer we've given you web components surely we can do this right how do we get inside the castle how do you style these shadow dump components and in polymer 0.5 we thought that the answer to this was dragons so we gave every developer a dragon we're like carry on have fun and if we've ever watched Game of Thrones once you get a dragon it grows really big doesn't speak English and eats all of your goats so that's kind of what happened and these dragons were shadowing deep and the problem with shadowing deep is that they kind of break this promise that I told you that I'm gonna give you a web component and you don't have to care about what it does you just like put in your application and run and everything's great because if you actually try to use shadowing deep let's say that we're changing the background of this button what you end up doing is opening the web tools of the developer tools start inspecting to figure out which CSS classes the one is pissing you off you find it you select it with some deeps and some shadows possibly both and then you get to change the background and this is terrible like you should you should need to do this we can do better sad face so so how do I get inside the castle how do we actually style these things guys dragons aren't actually real you should have yelled at me the first time I said dragons they're not things that we can use in real life you know what are things that get to break to castles bridges we're in Amsterdam we've seen a lot of bridges that's their only purpose to get you from like point A to point B preferably over water and how do we style things in HTML we've been styling styling them for decades it's with CSS the way you make things pretty with HTML is with CSS so surely we should be able to use CSS for web components as well and we can and these are custom properties and they're part of the spec and Polymer's been using them and this is how we've been styling Polymer 1.0 elements so if we look at our element from before and it has a style in there let's say that this is the class that's giving the background of the button what if inside of instead of me hard coding the color of the button what if I give it a variable like a custom property I'll call it fancy button background fancy buttons the element that I'm styling this I was pretty legit I can even give it a default value so if you the user of this element don't provide me with with a color I'll just use red and then I can do this anywhere in the scope of my button because maybe my button is actually really complicated and has a lot of like nested divs and very far down is the class that's actually giving the background of the button so I can do that I can put any selector that I want and create this custom property and then when you the user of the fancy button get to style this button all you have to do is use the name of the property and give it a value cornflower blue that's a legal CSS color name great and now I've made all the fancy buttons blue but but I also can make a particular button a particular submit button this one's going to be cornflower blue all the other ones are going to be red and this might look a little bit scary but it's actually exactly how we've been doing normal CSS see if I take away the gibberish at the beginning is just background called cornflower blue this is the thing we know the gibberish at the beginning is actually because you have to somehow tell the CSS parser that you know what you're doing and you're not just typing things that don't have any meeting that's what the two dashes are the dashes are like listen I promise you this thing may exist you go look for it is not just junk and it's really powerful so we've created the CSS property and you might be tempted to think that you know oh good assassin less have had variables forever good for you but it's not like assassinless variable because in assassinless styles and variables are still global like I can define background to be blue but everything that uses background is gonna have blue so we're not actually scoped it at all but in this case it's this particular submit button this particular castle that's going to have the background of blue all the other ones are not so this is really great the other little gimmick here is that we have this like weird-looking style tag and this is because CSS properties are part of the spec there are things that we're all getting around to but they haven't actually been implemented in all the browsers so Firefox nightly I believe has it and if you look in the audience Levi works on on the Chrome blink team and he's right now actually implementing CSS properties in Chrome but they're not there yet so Polymer has to polyfill it for a while and that's how we polyfill it the super awesome part that now we have these CSS properties available we get to do themes and they're so easy and so amazing so imagine that I create a file let's call it light material design theme and I define a whole bunch of CSS properties and I give them really nice names like primary color primary background color disabled color and I give them values now when I started building my application I can just use these CSS property names inside of color so instead of saying color colon gray I can use colored var dark primary color and then that's that's what your element would look like and then in your demo or in your main page you can just decide which theme you're going to use maybe you want the light theme maybe you want the dark theme and all of them are just gonna work by magic because once you import the right theme these values are gonna get substituted correctly so that's pretty awesome the thing however is that there's a lot of CSS and you're not going to expose a property for everything out there because that's really annoying so in our style from before we had things are overlapping there that's great so we had a fancy button and it had a background and that was super good but then you as a user you're like great background's amazing but you know what else I need I need padding and I'm like yeah here you go you have padding and you're like great I have padding but you know what I need I need a opacity and if you think this isn't a real scenario I've been working on elements for like six months and this is exactly what you guys do you send me like issues that some property isn't there and could I possibly add it so we have an answer for that too because if you can define one CSS property well you can define a bag of properties and this is what we call a mix-in and this has also been a specked out by tab atkins he recently proposed it so we have super hopes is going to make it into the spec as well but here basically we're saying listen I've given you the background property which I'm pretty sure 90% of the time that's the one that you want to use but in case there's anything that I make missed here's a fancy button mix-in so you can define a whole bag of properties and we're just gonna teleport them and apply them in here it's gonna be great so if you go back to my button where it had it was a nice calming cornflower blue background I can now define also define a mix-in and say oh good it's gonna also have a padding of 30 and it's great and this might look a little bit scary because you're like oh no selector instead of selector what's going on but it's actually a lot like a regular CSS property it has a name it's followed by a colon it has a value and then has a semicolon and that value is between squiggles because you can put a whole bunch of things in there so we want to keep track of them at the same time we're sort of scoping them together and it works in the same way so this mix-in only applies to the submit button only applies to this particular castle and it stays there and just gets inherited downwards like a normal CSS property would so styling in Polymer 1.0 is way more powerful because we get to use things that we've been using forever we've always styled HTML with CSS so there's no reason why we shouldn't be styling web components with CSS now that we have custom properties that's exactly what we're gonna do so stop using shadow and deep also they're getting deprecated and we're gonna start ripping them out of all the code so if you're using them very sorry you're about to get broken soon and get on the custom properties boat because it's great thank you