From the course: Learning Web Components
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Define custom elements
- [Instructor] There are a few rules that need to be followed when defining custom elements. First, custom element names must contain hyphens. This lets the browser know that the element is a custom element. Next, we need to define a JavaScript class that will control the element's behavior. To actually define the element in the browser, we need to call the customElement.define function. Alright, that should be enough to get us started, and before we look at the code, let's take a look at the finished example to see what it is that we're going to be building. So here in the browser, I opened the customelem_finished.html file, and this yellow message banner here in the example area is the custom message banner element. And you can see that when I click on it, the banner automatically dismisses. I can also toggle the banner's appearance directly from JavaScript by clicking this toggle banner button, and just to show you that it works across the browsers, here's the same file in Firefox.…
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.