Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.
Exercise 1 of 1
Five CSS rules — decide which ones can style an element inside a shadow root, and which stop at the boundary.
For each rule, pick whether it styles the target element or is blocked at the boundary.
user-badge .avatar { border-radius: 50%; }.avatar is a div inside the component's shadow root
user-badge span { color: rgb(250,199,117); }The <span> is slotted content you placed between the component's tags
user-badge { --badge-color: rgb(93,202,165); }The component uses var(--badge-color) in its internal styles
user-badge * { box-sizing: border-box; }The * targets all descendants including shadow DOM internals
body { font-family: "Inter", sans-serif; }The component has no font-family set inside its shadow root
The rule: if you wrote it, you can style it. CSS custom properties (--var) and inheritable properties like font-family are the two exceptions that always cross the boundary.