Exercise

Build a reusable card component using web components that can display various types of content. You should have a HTML file and a JavaScript file containing your Web Component implementation.

Your card component should:

  • Use a custom element with an appropriate name (following Web Components naming conventions)

  • Implement shadow DOM for style encapsulation

  • Include at least three different slot areas (e.g., header, content, footer)

  • Support customization through both attributes and CSS custom properties (variables)

  • Allow for different types of content (text, images, other HTML elements)

  • Maintain consistent styling while being visually customizable

Practice Questions:

  1. Create a custom element called "toggle-button" that:
  • Displays a button that toggles between ON/OFF states
  • Changes color based on state (green for ON, red for OFF)
  • Dispatches a custom event called "toggle-changed" when clicked
  • Maintains its state even if the page reloads (using localStorage)
  1. Create a custom element called "user-profile" that displays a user's name and role. The element should accept "name" and "role" attributes. Style it to have a card-like appearance with a border and padding.
  • Create the UserProfile class that extends HTMLElement
  • Define the custom element
  • Add a template with basic styling
  • Display the attribute values