Building a REAL Web Component from Scratch! - Tutorial

web components web components are really freaking awesome i love them because it encapsulates html and css and its own functionality into its own little bubble its own little world where it can't be affected by anything else it has its own shadow dom and so if you have css in your main project and you want to use a component for some sort of user interface element like a tool tip which is what we're going to be creating then you can do so without worrying about having uh you know basically being interfered with by your project or screwing it up so let me just show you this is what we're going to create from scratch i just a little kind of like a tool tip thing as you can see we have two of them but they're customized so we can pass options to them i'm going to show you exactly how to do that i'm going to show you the design process just from a ui ux perspective but yeah it's very cool and i'm going to walk you through from the very beginning so let's go ahead and get started before we begin this video is sponsored by lenode now as a front-end developer or a designer you know that you need a personal portfolio and if you use a website builder like wix or squarespace they lack total customization and they lock you into using their platform but to be a pro you need to use the tools that the pros actually use so level up start building your own projects and your own portfolio on an enterprise level content management system like wordpress there's drupal now real web development sometimes requires knowledge of spinning up servers managing domain names and setting up an occasional staging environment and there's no better or simpler way to learn the ins and out of hosting your website than with lenode cloud hosting the node cloud hosting makes it as easy as possible for you to deploy a wordpress or drupal website in seconds with the free lenode one click app marketplace so click on the very top link here in the youtube description to get your free lenode account along with twenty dollars of free hosting and all the tools that you need to build enterprise class websites all right so we're first going to step here in adobe xd because i'm a ui ux guy i just can't myself i know this is a web components front end development tutorial but i'd like to give everybody the full spectrum of a given project so in this case i want to make sure the tool tip looks good the icons are good so i'm going to design them from scratch now here's the thing if you don't want to follow along with the design part then just use the time stamp the new relatively new time stamp feature at the bottom of this youtube video player right here and then just go straight to the front end development part where we step into the actual code uh but if you're interested in design and let you know the thought process then watch now so again so there's going to be like like a in content or in-text sort of tool tip all right so the first thing we're going to use is just a type say this is my oops yeah i know it's really small but one second this is my snazzy text with a an awesome tool tip okay it doesn't matter what the type is really uh we're using nunito here for the font that's what i'll use in the project as well and i'm leaving some space here to emulate the space where a tool tip will go all right so we're going to use a circular tooltip you don't have to not a big deal you can also even not even have an icon for a tool tip but have like a dotted underline under a certain thing i like a certain word or whatever no big deal i'm just choosing to do this and we're just going to choose like a blue like that all right so now we're going to create an exclamation point i'm not going to use the type tool i'm going to use i just the drawing tools to create that which will be freaking dead simple so i'm creating the top portion that's pretty thick so i'm going to hold alt drag that in just slightly and then we'll pull this one up i'm gonna go back to select tool double click it so we now we have access to each of the anchor points and you know what i'm gonna i increase this yeah we're going to increase that and what we'll do is just pull yeah we'll increase this one as well sorry i'm making changes all over the place let's back up alt all right there we go so now i'm going to double click bring this in all right that'll work and then we need the actual dot that's a little bit too large no big deal though just get things situated here all right i think i like that you get both of them and then now we know where we're centered vertically i think i'm going to move this up just a bit it's a little bit tall now we're going to take both of them move them into place all right i like that so then what we'll do is we'll take that as well all three of those elements alt and then shift pull up and we're going to create the x with our shapes as well so looking at this i'm going to start here first just so we can get like a rough width approximation oh i'm not able to line this up exactly as i want it's right right there nope that's not it here let's do this instead start the center here just like it did before alright there we go hold shift let's bring this in there we go hold shift and then we'll go ahead ctrl d to duplicate hold shift rotate with your mouse all right that looks pretty good i might want to scale this down just a tad bit all right those are our two icons i like those all right sorry for the screw-ups i meant that to go a little bit more smooth than that all right so now we're going to take both of these we're going to group them up we take these three elements and group them up as well we're going to call this one we want to name the groups because once we export these as svgs this is the name based on the group name that they will be saved as the file so this is going to be um alert and then this one will be exit all right so now we're going to take this and we're going to put it on top but then drag it underneath in the layer stack just so we can't see it and then now what we need to do is draw out the actual tooltip container when somebody clicks on uh you can make it or if they hover over whatever um this little icon so now what we'll do is we're gonna leave that eye white and then we're going to have a shadow we'll offset the axe a little ax the x axis axis a little bit and then also bring that i don't like those huge rounded corners all right so that's looking pretty good there we'll make the background and the text customizable for the web component itself let's bring this down a lot to like let's say 14 and then we'll go over here to my plugins we'll go to lorem ipsum i quick lorem ipsum yeah something like that just to simulate the text inside of it i might want to make this like 13. okay so now what we're going to do is we're going to alt and drag holding shift to replicate that artboard and this artboard over here we want to take this top one and get rid of the opacity and then this one we want to take this both of these elements and just drag them all the way down and then also take down the opacity all right so now we're ready to prototype we'll click on the actual icon we'll bring it over with auto animate as the action type uh point five seconds will be good wait 0.5 s there we go and then we'll bring this one back and there we go we are done so let's hit play and see what it looks like so we click it it's going to kind of it won't look like that exactly once we're in the actual project but it'll basically behave like this all right awesome so let's go ahead and get started with the coding portion all right not just yet with the coding portion i forgot i need to we need to export both of these so make sure your layers are out over here in xd we're going to take alert and exit we're going to go to export and selected and then we're going to choose svg and i'm just exporting to my desktop we're not going to actually use these as files we're going to grab the contents or the svg the data from the file and then just use that instead of referencing it through image tag or whatever so i'm just going to export that to the desktop and now we're going to go back here to the actual project so all i have is an empty folder almost empty there's an index.html with some boilerplate if you don't know about this you're using visual studio code like i am just hit exclamation point enter and you get this exact same thing i except i do have a link rel going to my css main css which doesn't yet exist so let's do that now css main.css and we're ready to rock in that regard let's make this a little bit bigger and then i let's go ahead and create the actual web component file which is just a js file javascript file and we're going to call ours uh let me look at my reference code really quickly very unprofessional gary you should have this stuff ready all right i and we're going to call it popup notify.jf js i don't know why i call it pop-up notify why not just call it tooltip or something whatever all right so we're going to call it pop-up notify we've got camelcase here js all right now we're going to reference that and this is the way you get your your your web component into your project at least if it's a vanilla javascript project you're not using any type of framework script source equals pop-up notify dot js that's it all right so pop-up notify.js now in order to make this thing an actual web component there's just a few things that we need to first create so the first thing the way the heart of your web component is going to be a class that extends an html element which basically means we are creating our own html element so what we're going to do is put in class what do we want what do you want to name it well pop-up notify so oh we'll do the correct non-cam cases it can be capitalized pop up if i can pop up if i can spell pop up notify i extends html element all right so inside of here inside of every web component what you're going to see is a constructor all right inside of the constructor you have three lines that are essentially that are a part of every web component to make it work and these are the heart of it so first we have super then we have this dot attach shadow and we're going to set the mode to open it could be closed depending on your needs but making it open just allows us to access the shadow dom via the shadow root all right which is really what we're going to be doing in the next line which is going to be this dot shadow root and we're going to say append child and we're going to say template dot content dot clone node true what this is basically saying with these two lines is especially this line right here is we're going to create a template up above here and it's going to attach it to this new shadow root all right which is the shadow dom essentially i and it's going to be in in this shadow dom is encapsulated separate from the main document object model that's outside of the actual web component itself all right so hopefully that makes sense really there's nothing else you really need to do within the constructor here and you just approach this like you would any other javascript uh project really i've forgot a couple parts there's still two more things that are really web component specific first we have to create that template right so this template right here doesn't even exist so the way we do that is we create a constant of template and we say equals document.createelement and we're going to call this template then template dot inner html equals we have our backticks and this is where your styles your your css and also your html templating goes as well your html elements you can actually link use the link i link rel all that and you can link to a separate css file if you want but we're going to keep ours in here because there's not a ton of css essentially so at the top we can just do inline css like that and start defining the css there and then beneath you just start with uh whatever html elements are necessary to pull off your given web component all right so for us we're going to first create a div class of tool tip tip container now inside of here we're just going to say test all right and what this is going to allow us to do is to test to make sure this web component is even working we have one final step that is specific to web component tree if that's even a word i just made it up it's not we're going to do window.custom elements dot define and then this is going to be the custom tag that we use in the regular project so pop up notify i guess we'll call and then we pass in in the second argument pop-up notify class that we created up above all right so now we save this and inside of here in our html let's just give ourselves a class of container and we're going to give ourselves an h1 um my awesome tool tip and then inside of here we're going to have lorem of like 10 now maybe 15. and then inside of here we're going to reference and use our new custom html element or our web component rather so we're going to call it pop-up notify because that's what we called it before and then we're just going to save all right then we're going to right click open with live server if you don't have the live server plug-in come over here to plugins type in live server and then just install it all right so now open with live server where are you and you're going to see it right there test that is our web component if hit ctrl shift i and we look at our elements here and we expand this out you're going to see within the paragraph we have this pop-up notify thing here that's our web component our custom html element we also see this shadow root here as well which this is what's showing us where everything in that template is defined all right awesome now it's it's really just a matter of regular vanilla javascript for getting this thing to work as we intend to get it to work in css of course so let's go back to our pop-up notify and let's start writing out the rest of the html that's necessary to getting this thing working so all we're going to have inside of our tooltip container is first we're going to drag in our alert and our exit now again i'm not putting it as a file here in the file folder so i'm just opening it just so i can gain access to the svg so the alert let's go ahead and get rid of some of this unnecessary stuff here we're also yeah that's fine we'll keep all this stuff we could probably simplify it a lot more getting rid of like the groups and stuff but i'm not too concerned just for the purpose of this tutorial so we're going to put we're going to paste all that right there so let's go ahead and fix that spacing let's fix this too all right um and also we're also going to go ahead and yeah we're going to leave that just as is and then what we're going to do same thing with our exit so get rid of this copy that close this by the way if we save this now before we paste that second one in we'll see it right here now of course we need css to make it so it's not breaking that line over there now for now right here i'm going to paste that one in and that one goes right there so now i we're going to have actually we can get rid of the width and height we can control that with the css we're going to have a class here i was screaming class there for a second with my caps lock i we're going to also do the same thing here this is going to be class of cancel so we have class alert and then cancel that way we can reference these as we need to so the alert uh or the the cancel one right here we're gonna we know by default that we need display none on that dude so we're gonna do cancel display none so now when we save it it's still just going to show us because we got rid of those two width and height attributes a very large alert and not the cancel so now let's go ahead and start actually uh getting things working here first let's fix that huge problem with the svg so with 1m unit cursor pointer ah all right so right there now we have this working a little bit so let's also get our tool tip uh container working here so the tool tip container remember if we scroll down right here this is tool tip container it's just kind of encapsulated everything so what we'll do is we need to set tool tip container to a position of display inline block also a position of relative and then we're going to do a z index here of two now that gets us back here so that it's not i've you know breaking this line here so now it's display in inline which really is what's going to help it work better before i continue on with this stuff i want to do a little bit in main css outside of the web component just to get stuff a little bit more situated so i have a body a font family indoneto and also the container which is inside of our index.html right there so that's gonna tidy things up a little bit make it just look better let's reset this here there we go all right so we click it obviously nothing happens so now what we want to do is we're going to take our notify container so our notify container doesn't yet exist in our html so our notify container is just going to go outside of the svg and we're going to say div class equals notify container and right here i'm just going to put my tool tip text or whatever like that just just so we can see it so we're going to see now my tool tip text has been put in right there we don't want that um so what we're going to do is there's a lot of properties that are going to be a part of this tooltip container so tooltip container and how about i do this real quick quickly here i'm going to move things over just so you can see some of the progress as we're working so i don't have to keep on manually switching all right okay so tooltip container like i said quite a few changes position is going to be absolute all right uh our bottom is going to be 125 percent from its original position all right we're actually going to do a z index here i i think i just put like something nine just to make sure it goes on top of everything width is going to be 300 pixels i know it disappeared but we'll get it back don't worry uh the background is going to be white and also we're going to have a box shadow of five pixels five pixels 10 pixel blur rgba zero zero zero point two no i think we're just doing yeah ten percent basically uh on that part and let me make sure we can get this sucker back because really i thought it should be there i i guarantee it probably has something to do with this bottom 125 percent issue right there so the actual tooltip container i want to make sure i put this in the correct area diff class notify container oh that's why i'm an idiot yeah notify container oh boy okay so bottom 125 so now it should be on the top see right there let's make that a little bit larger all right so also outside of our box shadow we're also going to have a font size put your fingers in the right position gary font size is going to be 0.8 n units we're also going to take a border radius of 0.5 m units padding 1m units because we want white space in there we don't want to look ugly now it's looking better as you can see transform is going to be scale uh zero all right because initially we don't want to see this thing right so now we've got all the basic styling this is what we want it to look like over here when somebody clicks on it right so now we're going to transform the scale to zero we're not going to see it anymore and we're going to do a transform origin because if we don't do the transform origin and we go to scale this back up once the user clicks it it it comes in from a weird location so transform origin is going to be from the bottom left so it's going to scale out from the bottom to the left makes sense because we have this right here um you could change this uh and you can change this these directions and this property and value along with the bottom value so you can make it show up beneath it to the left of it to the right of it whatever you want to do all right and then also one more we're going to transition it which is just a simple from into animation so i we're going to do transform 0.5 seconds and then i'm going to use a specific i cubic bezier for the animation type so it's going to be i'm actually going to just paste it off screen here from the off screen cubic bezier i forget which one this is called um let me show you something real quickly just in case you're confused as to where i got that from i didn't sit there and type that out by hand um css transition cubic no no easings there there's a lot of these cool easings using tools and stuff i didn't use this one for it is this it this might have been it but basically this will give you like there's there's a cubic bezier there's so many of these out here these tools um so just use one of them and it'll usually show you like the flow and like what these look at look like uh when you're playing them so if you hover over this one for instance it shows you this one kind of winds down and then shoots up so if you want that here's the code right there okay continuing on i let's save that of course it's not going to work yet because we need to actually make this do something and change our transform scale property when somebody clicks this so how do we do that all right so let's expand this back out so in order for that to work we're going to use a part of a life cycle hook for web components called connected callback all right so in connected callback outside of our constructor we do connected callback wait is that the name of it properly yes it is this basically is a life cycle hook for when your component is loaded so if you want things to change instantly or to be ready instantly when it's you know it's loaded into the page then you put it here all right so what we're going to do first is we're going to do this dot shadow root and then all the other vanilla javascript that you know in order to interact with the dom starts making sense here after this point so we want to get the alert button so we do query selector alert and again alert is coming from class alert all right so this is the one with the exclamation point now we have that we can do an add event listener we're going to listen for a click and again you can make that you know a hover or whatever you want arrow function and inside of here we just say this dot tool tip this is going to be a custom function that we create oh why does it do that i hate when it does that all right this tool tip we're just going to pass in a boolean value called true so this function here let's create that tool tip function inside of it it's going to take one argument and that's going to be called expand state all right so expand state of course will be either true or false and then we're going to create a couple constants up here so i we're going to create a constant of tool tip this dot shadow root dot query selector is going to be our notify container now the notifier container is like the the actual verbiage all right it's what is it this thing right here and we're going to replicate that shift alt down arrow key just a couple times alert and cancel as well so this is going to be i believe this is class alert and then cancel yep all right okay so once we have those we're just going to say if expand state is true then we're going to say tool tip dot style dot transform oh my god i hate that what is wrong with you there we go transform equals scale one all right so we're going from scale zero to scale one so tool tip remember notify container um that's gonna change this element transform scale to one when somebody clicks that alert button right so let's go ahead and just give that a shot and see if it works at all look at that it worked now it didn't change this icon because we want it to change to an x we click it again it doesn't go away nothing happens so we're not done yet what we'll also do is uh inside of there we're going to say oops i'm in the wrong area we're going to say alert.style.display equals none so we're going to hide the alert button we're going to do cancel style display and we'll just do block and if you wanted to animate these things you could as well expand state is going to be false all right so now what we'll do is we'll test this out now it changes to an x the x actually the cancel icon basically so now we'll just do else and we're just going to copy in a few more things here all right so this is going to be scale 0 uh alert is going to well let's just flip these around this will be alert and this will be cancel there we go so now hit x oh and it doesn't go away oh i know why it's because i forgot to create a click event on cancel all right so we change that to false so now we go back click on it click on it again and it goes right back very exciting stuff so what's also cool um well i'll demonstrate that part afterwards so now that's how you create a very simple web component but obviously you want somebody to be able to change this stuff right here my tool tip text so that's where you use what's called a slot all right and you can use multiple slots we're only going to need one so the first one that we're going to use here is going to be it's basically an element called slot and then we use an attribute called name and then we're going to call this here message message will come from so we come over here and the way we designate a slot is let's go ahead and just push this out just so we can focus on this one area over here inside of it we can use an html element and give it an attribute of slot all right so for me we're going to use a span element and we're going to say slot attribute equals message and now we can put in whatever we want like lorem10 that's that's going to be our tooltip message that way we can make a dynamic for the web component when it's used outside as it's intended to use as since it's intended to be used rather so click on this and then there we go that's exactly what we wanted and so of course you can have multiple elements and multiple slots however you wish but that's basically the flow for creating it slot name equals message slot equals message here on any given html element now what about passing attributes from you know outside the web component and into it all right for instance you might want to do that so that you can allow them to control various settings right so um what we'll do let's say we want people to be able to change the background color and the font color right of this little tool tip pop-up so what we can do is i'm going to first let's just work this way and you you create the attribute like any other html element you do inside of the opening tag and we'll name this one tip background and i'll just say ffcc00 that's like a yellowish color and then also tip color for the font color equals we'll just make the font white and burn people's eyeballs essentially so then we need to tie into those here in the logic of our web component so basically what we'll do is in connected callback we're going to say if first we want to see if there is an actual attribute that's being defined otherwise it's going to fall back on whatever style the regular css background for the background of it and also the font size or the the font color rather so we're going to say if this dot get attribute tip background then what we'll set is this dot shadow root dot query selector notify container got to make sure you put the class period there and then we say style.background equals and i'm just going to copy and paste this there we go so now the tip background should be uh not white but yellowish orange very very cool and we could do this one more time for the actual color so we'll say tip color this is going to be font color so the color for font is color i mean the property for color is color jesus christ what are we talking about tip color um there we go so now that's really bad because it's white and that's not enough contrast but you get the point so now you can create any number of these you know configuration options that will allow people to control any css property that you want so not just css properties but also perhaps functionality as well that you can control through javascript so i'm just going to leave it at that oh no i'm not i'm going to show you that you can reuse these things anywhere so let's put this one right here except maybe we'll leave tip background off uh we'll make the text color gray perhaps and i'm gonna put in some custom yo what's up persons okay let's save that let's go back here yo what's up persons notice it's gray it's completely unique this one stays there it works as well i very very very cool stuff all right guys hopefully you learned something and you enjoyed that if you did make sure to subscribe if you've created your own web components that people can use go ahead and give it a mention down below i'll give you a a heart icon and i'll also maybe even put you in the pinned convent let me know i'll see you guys soon and goodbye [Music] you

Channel: DesignCourse

Views: 35,521

Rating: 4.9466329 out of 5

Keywords: web component, web components, web components tutorial, what is a web component, web component course, web component crash course, how to make a web component, how to create a web component, web component guide, web component 2020, web components 2020, javascript, web components javascript, web components vanilla js

Id: mNtLjzzxGQM

Length: 35min 50sec (2150 seconds)

Published: Tue Sep 08 2020