From the course: Learning Web Components
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Composition and content
- [Instructor] Now that we have our basic understanding of Shadow DOM and how to create it, we have to figure out how to compose more complex elements. Composition is an important term to understand when working with Shadow DOM. It determines how a custom element structure and appearance are built out of other primitive elements. So to better understand this, let's take a look at an example. HTML pages are built or composed out of HTML. So here's a snippet of HTML that shows some standard tags along with our custom element, the message banner right there. Now, to define the internal structure of the custom element, we use Shadow DOM, and we did this in the last video by just hardcoding some HTML into the inner HTML property. And in this case, we're saying that the message banner will be represented in Shadow DOM by a div element, because we want div behavior. Now the content that the consumer of our custom element supplies; in this case, the message that goes inside the message-banner…
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.