Exercise: Writing an Advanced Web Component: Slots

placeholder

This is a premium lesson.

Subscribe to get access to the entire course.

Sign up now

Task 1: Updating the album cover component

Follow the instructions in the README to get started.

Try your hand at these two tasks:

  1. Update the album cover to allow consumers to pass through their own markup instead of attributes.
    1. Update the markup in the template to use the slot element
    2. Where the component is used, remove the attributes, and pass through your content as children
  2. Add a cool frame element that adds a shadow around its child content.
    1. Add the correct markup within the frame template
    2. Wrap the album-cover in a odyssey-frame element.

Exercise 2: Using slots in your checkbox component

For exercise two, you’ll be making the changes to th