Understand how styles can be applied to custom elements and see how custom elements can define their own styles.
- [Voiceover] Custom elements can have styling applied,…just like any other element in the browser.…To give our custom element a nice appearance,…let's add some CSS to our example.…So I'm going to scroll down here,…and right here, under this TODO,…I'm going to add some styling information.…So I'll put in a style tag,…and for the style, I'll define two classes.…First, I'll define something called message banner,…which is basically the same name as my custom tag,…and I'll add another one named message banner,…and I'll put in a CSS filter, for when it is visible.…
So, for the message banner,…I'm just going to define some properties,…like background color, and so on.…So the background will be cornsilk,…give it a border.…
I'm going to have the display default to be none,…and then we'll give it a top of zero,…and a right of zero.…Alright, so that's the basic default style.…So we're going to have sort of a yellowish…hint and color to it.…By default, it won't display.…And what I'm going to do is,…when the visible attribute is present,…
Joe Marini starts the course by going into HTML templates, which provide a browser-native way to declare sections of HTML markup that will be used frequently in your app. Next, he covers HTML imports, explaining how to use them and create reusable modules. Then, he takes you through working with custom elements. To wrap up the course, he discusses Shadow DOM and how to create Shadow DOM to define custom element structure and rendering within a page.
- Web standards
- Customizing web components
- Activating and using templates
- Using HTML imports
- Creating reusable modules
- Defining custom elements
- Customizing elements and styles
- Creating Shadow DOM
- Styling and Shadow DOM