From the course: Learning Web Components
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Custom element properties and attributes
From the course: Learning Web Components
Custom element properties and attributes
- [Instructor] The last step that we're going to take in creating our custom message banner element is that we're going to add a simple JavaScript API so that it can controlled from script. First, we'll make it so that when someone clicks on our message banner, it automatically hides itself. And we'll also wire up the visible attribute so that it can be controlled from JavaScript, and recall from the initial demo that I've got an event listener here, listening for the click event on the toggle button that shows and hides the message banner. And it does that by simply changing the visible attribute to flip it to its opposite value. So we'll wire up that a bit later. But first, let's give our element the ability to close itself when it gets clicked on. And we'll do this by adding a click handler directly to the element when it is created in the constructor. So what I'll do is, I'll say this dot add event listener, and I'll listen for the click message, and then I'll put in a JavaScript…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.