Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.
Exercise 1 of 1
Four scenarios — pick the correct approach for styling a web component from an external stylesheet using CSS custom properties, ::part(), or attribute themes.
Q1: A component uses var(--alert-bg) in its internal styles. Which CSS correctly passes a color into it?
Q2: A component marks an internal button with part="action". Which selector styles it from outside?
Q3: What does setting theme="warn" on a component do?
Q4: Can ::part() style an element inside a nested shadow root? (component A contains component B)
Three tools cross the boundary on the component author's terms: CSS custom properties, named parts (::part()), and attribute-driven themes (:host([attr])). All three require the author to opt in.