Custom Web Component Behaviours and Events

all right so this is the fourth video in the web component series the first one we talked about how to build a web component and the content that you had inside of there second one was about styling them third one was about properties and attributes so how you could add custom properties and attributes and this final one is about behaviors and events so when the web component is rendered or removed if you're using JavaScript and you're adding a big bang component to the page just like you'd add a paragraph to the page how we can hook into that behavior or when it's removed from the page how you can hook into that and do stuff with it we're also going to talk about events and functions and how you can actually pass functions in your code into your web component so here we have our component pretty much the same as what we had in the previous video about properties and attributes I've got a background color I've added a button here so this is going to be rendered with a slot I have a span with the text that's my slot so if I add a slot so some kind of element with the slot attribute with the name done this is going to be my text that's going to be put inside the button if that is not there then I don't want anything to appear on the screen so if I remove this what I want to have happen is I don't want any button to be there at all so we're going to talk about doing that thank you we're also going to talk about how we can use an attribute to pass a function down into it so in my big bang element here here's the HTML that we're working with so there's a div with an H1 heading the slot for the title and then there's a paragraph with a button and here's that slot so if the person has that slot we want to put that inside of here and if they don't have that slot then we don't want to have this showing up on the screen this button we don't want that there at all all right so in our HTML extended Constructor here where we're creating the web component this is where you can write some custom functionality to handle slots so if the slot is added or changed if the content inside the slot is changed we can handle that here if you've got custom events that you want to add so event handling for the user interacting with this content you can do that here and we can also draw in values from the attributes now I've already added the code here for an attribute called action I've created the property to match that so this is based on the previous video linked to that's up at the top we're going to take just a string so in here if I were to do this if I was to say action equals and in my main script so here's my script for the page you notice there's no type or defer or anything like that I'm just linking to this script inside of here I've got two functions one called hello one called goodbye these are the functions that I want to call these are functions that I've written as part of my web page and I've imported we're saying we've imported the Big Bang component we put it onto the page but we want to be able to call one of our own functions when the user clicks the button the buttons being built by the web component but we want to have one of our functions run when that happens so here's the name hello we'll start with that we'll take this name hello and we'll put it in here as the value of the action so this is how we're going to connect the two things we're going to take this value and then we're going to say hey okay we've got the name of the function that we want to run how do we do it from inside of here all right so we're going to get to that in a moment the other thing that we're going to add right here we'll do this part first it's fairly straightforward with web components when you extend the HTML element there's two built-in methods it's kind of the life cycle of the web component that we can draw on one is called connected callback the other one is disconnected callback this first one gets called when the Big Bang element is added to the page so this big bang thing in the HTML when somebody puts it there or in JavaScript if they're saying create element big bang and then append to the page so when it's added to the Dom when it's added to the page itself that triggers this and this one gets triggered when the Big Bang element is removed from the page so we're getting rid of the Big Bang element and we're going to look at examples of that as well so right now let's just put a console log in here okay and there's the add it to Page so we know that this method was called this one has not been called yet but we will get to that we will see this message come up a little bit later when we've got our click event on that button working okay so what do you do with these methods here could be okay if I when this method gets called it means that it's already been removed from the Dom so I don't have access to its position in the Dom I don't have access to it within the context of the page the other elements that are on the page I do have access access to the document object I do have access to the page it's just that my big bang element has been removed it's just a chance to do some cleanup or something like that connected when we first add something to the page you might want to set a default value for something like right now I've got this light coral color maybe I wanted to add a default value for it so we can say you know if um this dot color if I've got that property then we're going to set this dot color to let's go for the old color that we were using before cornflower blue and there it is so when this was added to the page we set a default value for color so this overrode what we had inside of here so this is what's in the HTML and when the page loaded sorry when the component was added to the page so the Constructor happens when the component's being built this gets called when it's being added to the page when it was being added to the page was after the Constructor was called because the constructors called because we actually wrote The Big Bang in the HTML so this was here that's what triggered the Constructor and then the connected callback that happens once it's already on the page so we're overwriting the value that's inside there okay so just something to do inside of here the slots themselves so we have slot title slot done these are two things we're accessing two slot elements that are inside our component come back up here 's one slot and then a second one so there's two slots here if we want to add listeners to these two slots to know when the content inside them changes we can do that inside the Constructor so let's let's find a reference to these things so we're going to get a listener for the slot that we want the one with the button we're going to add our listener onto that or get a reference to that one first of all so let's say our we'll call it our button slots BTN slot is this dot root dot query selector and well it's some HTML reference so I'll say p button slot we'll just do it like that so inside a paragraph if there's a button and inside the button there's a slot that is going to find me the first slot that's inside of a button that's inside the paragraph that's the one I want to deal with okay so I'm referencing that then I want to get the stuff that people put inside there so I can actually access whatever this is being replaced with so we can say that let's HTML slot I'll just use that as my variable for the stuff that's being put in there to replace the slot and etn Slot dot assigned notes now this is a method that's going to return an array of all the nodes that were added into this and I want the first one I know that there's only going to be one so assigned nodes gives us that array and if we look inside of here what is inside this slot or what is being put inside the slot it's this so the span itself that is going to be the first thing that's inside of there so there's that span now we've got two methods there's one that's which is assigned nodes the other one is assigned elements so if you're familiar with the difference between nodes and elements nodes can be text nodes or elements elements are just elements that are the tags the HTML tags so we've got two methods depending on what it is that we want to listen for all right now once we have this we can add listeners so the BTN slot that is this slot element right here the one that's going to be replaced with HTML from the HTML page here we can say I want to add an event listener and the event that I'm going to listen for is slot changed this method right here is only going to run when something gets put into there so I can say hey I want HTML slot let's see what's inside that when the slot changes okay so we're not changing it yet we've got the the default stuff that's happening uh when with when it's initially constructed but in the JavaScript on the page if we were to change this span right here if we were to change that thing with the slot attribute set to done at that point that is when this would be triggled triggered and again we can use inside of here the assigned nodes and the assigned elements to find the bits and pieces that we want probably not going to use this one that much but it's good to know that it's there just in case on those rare instances where you would need it all right so events so we have our initial load and with the Constructor we've got our added to the page with our connected callback remove from page disconnected callback and then events inside of here we're going to add an event to this button so I can put a click listener on the button on the paragraph whatever it is that I want but I'm going to say inside of here this button if this button gets clicked I want to do something now I'm not going to put that functionality up in main.js because the shadow Dom is closed which means I can't access these things inside of here this HTML is hidden from the outside world back on main.js I can add a click listener to Big Bang so to this thing as a whole this big bang element I can put listeners on that but I cannot put listeners on the HTML that's generated by by The Big Bang component when this is closed this is all sealed and hidden so what I'm going to do here is I'm going to put an if statement around this I'm going to say if HTML slot and the reason I'm doing that is I'm going to check to see hey does there actually or was there actually something added there so if there was a node inside of here so if slot was actually replaced with something then I'm going to do this I'm going to add the slot change listener I'm going to add my click listener so we'll say vtn slot Dot add event listener click now if there was nothing added if HTML slot is empty that's when I want to do that cleanup that I was talking about earlier I wonder actually remove this thing I want to get rid of that so BTN slot is p button slot so this thing's parent is button or its parents parent is the paragraph I can do either one I'm going to keep it simple I'm just going to say I'm going to remove the button so if it doesn't exist then BTN slot parent element that would be the button tag itself that's wrapped around the span with the word okay I'm going to call remove okay so there it is we have our button but if I come into my HTML if I don't have this span okay there that little black rectangle is now gone I don't have that as part of my page now so I'm doing some cleanup when the component is being built I actually have something that can work whether or not the end user put this Span in there so if they don't have this there it means they don't want a button if they put it there this is the label for the button there it is okay great so back in here our click listener what do we want to do with this well I can write code here but what I really want to do is I want to call whatever the user tells me to call I want to get the value of action from here so hello I want to run that function which is in this code and these two files are not connected this was a module that was loaded separately so that we could build the Big Bang component this is the script for my page this could be coming from anywhere this is the one that's accessing the Dom and doing all this stuff so I invented the function that I want to use called hello now my action attribute right here for the action property the action attribute is just a string it's the word hello it's not actually a reference to the function it's just the name of the function it's just the label the string the text the characters that make up this name so h-e-l-l-o that's what the value of the attribute is and that's all you're allowed to have in attributes is strings so how do we get from the string to an actual method that we want to call and we want to also be able to pass this event bubble it up to here so we can access it okay so inside of here I've got this dot action that is my property which is going to be the word hello if one exists if somebody didn't put the attribute in there this dot action is going to be completely empty so I'm going to create a variable here I'm going to say let I'll just say action equal so this dot action we want to make sure that it actually has a value so down here we've said okay yeah set it to whatever the value is but if it doesn't exist it's not going to have anything inside there we could go in here if it had a value and make sure that it's a valid one but that's not really going to work for us we need to check it here this dot action okay is there actually a string it's not an empty string or it's not null I want to know if on the window object so this script right here has access to the window object it's the parent the global object that contains everything does it have a property called hello and when you create a function like this you are creating a property a global property on the window object it's on the global scope so it's being added to the window object so we can check to see if that but really we're already checking to see if there's something for the string what I want to know now is if window this.action so on the window object something called this assuming that this is not null or empty or undefined so look on the window object and get the type of that thing if it is equal to function what we want to do is that is going to be the function that we're going to call so I'm going to say window this dot action else I need a default function I need something else that I can do so I'm going to check to make sure that there is a property called this.action and then on the window object this.action it's type not going to be undefined we're hoping we want it to be function and if it is then that is what we assign to action and that is what we're actually going to call right here and we're going to pass in the event object this click event so we're passing it up to that hello function now if it doesn't exist what I'm going to do is I'm going to create right here a default function I'm going to make it part of my component I'm going to call it um let's say default action for Big Bang button there we go so this dot this so this dot default action for Big Bang button that function right here is going to be our default one if they don't provide us with an action attribute that has a valid value then here we go we're going to just do a console.log missing a valid action attribute value okay so let's test this now when we click on the button this code will run we should check the value of this to make sure that hello is something that exists on the window object so if window hello exists and if window hello is a function then that is what we will assign to action else we're going to call this one all right so if I click here okay so there it is it's working but it's not working when I click on the button that's the issue right here and that is because my click listener I added it on the BTN slot which is the span that wraps around the word okay so I actually want to add it to the parent of button slot this is just a design issue so buttonslot dot parentelement that is the button that's wrapped around the slot now the entire button works there we go so we're good to go now the other function that we had in here this one is going to have the example of removing it just so we can demonstrate that working as well so goodbye is the name of the function that we're going to put into here instead of hello we will put goodbye now that is the function that's going to call be called when we click on the button it's going to run this code right here which is going to call this goodbye function which is going to find our big bang element on the page and remove it which should trigger our disconnected callback and actually remove it from the page there we go not that the disconnected callback was calling the remove from page foreign this is called after it's removed the actual removal was being done right here so the local function is removing the Big Bang element and then because it's removed from the Dom because it's removed from the page that's what triggers this all right and that's it that's events that's behaviors dealing with things being added or removed from the page dealing with all the properties and attributes being able to pass functions into your components that are defined within the user scripts themselves so as long as you've got some documentation to tell them this is the name of the function that you create locally that is going to happen when the person clicks on your button you should be good to go all right so if you have any questions feel free to leave those in the comments I answer as many as I have time for and as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 7,023

Keywords: MAD9014, MAD9022, web development, JavaScript, JS, CSS, HTML, steve flix, steveflix, web dev, professor Steve, prof3ssorSt3v3, 100daysofcode, web components, custom events, web component connecting to external functions, handling missing attributes, web component behaviour, web component events

Id: Y3EH4tCS6ig

Length: 23min 24sec (1404 seconds)

Published: Thu Jan 05 2023