Web Component Tutorial - Dropdown
- 9 minutes
Transcript of Video
In this example we're going to build a simple drop-down web component. Here we have a drop-down that has a simple button and when clicked shows some dynamic content for our drop-down we'll be able to pass in a custom title for our button as well as any dynamic HTML that we'd like the drop-down to render. Taking a look at our drop-down template you can see we have a style tag. We style our div with a little bit of padding and a border that provides the drop-down box within our template. We have a simple button that we'll use to create a click handler to be able to toggle our content. In our template we have a div with our slot that will dynamically project our content from our user.
First we need to set up the ability to pass in a custom title into our button. To update the button title we need to set up the attributes and the properties for the title. First we need to implement the observed attributes static property. This returns a list of attributes that we want our component to watch for updates for. Here we're going to pass in just title so our component knows it should be watching for title changes. To store the information of the title we set up a get and set property that's going to store the value of title. We have a private property this stop underscore title. Whenever we get the title we'll return that value. Whenever we set the title we'll set that private title that we've created and then we're going to grab a reference to our button element and set the inner text of that button that way whenever the property or the attribute is updated our button reflects those changes.
To listen for attribute changes we need to implement the attribute change callback. This will pass in three parameters the attribute that changed the previous value and the new value. Here we do a simple check if the attribute is equal to title and the old value is different than the new value then we know to update it by setting the title property. We update the private underscore title as well as update the inner text of our button. Now that we can dynamically update our button we need to do a little bit of work to set up the click event. To be able to show and hide our content for our drop-down in our constructor we can see our title defaults to drop-down. So if we do not provide any kind of button text or title we'll just list drop down as the button. We create a property called show that will simply track whether or not it should show or hide our dynamic content.
We set up our shadow DOM and our template and then we query our template to be able to get reference to our button and our div element to be able to toggle and
show and hide our content. Here we get a reference to the button in our template
by using this dot shadow root query selector and now we can query our template.
Now that we have a reference to a button element we can set that inner text to our default title and also reference it when we set the title via a property. On our button element we're going to add a click listener so add event listener click and then call the method this dot toggle. Our toggle method will simply toggle the show property so this dot show will equal to the opposite of the stop show. We then use a reference to our content element which is the div element in our template with that div element we initially hide it by using some CSS to display:none and then when toggled we can check if the component is ready to show. We'll set to display block else we set the div to display:none now we can show and hide our dynamic content for our drop-down.
If we use a set timeout or some other asynchronous method of updating the title property we will be able to see that update reflect to the button. So here I have a set timeout after 3 seconds we'll update the title to new custom title. So if I save our title here after 3 seconds we'll see that our button is updated.