CSS specificity determines which competing declarations apply. In component-based pages, a selector such as `sample-component .increment-number` narrows styling, but styles can still leak into descendants or creep in from parent and page-level rules. section 9.1
Use specificity as a practical debugging lens:
- Scope ordinary element rules to the component that owns them instead of styling every matching element globally. section 9.1
- Check both directions of style creep: component rules can affect nested components, while page-level rules can affect component internals. section 9.1
- Remember that CSS custom properties inherit; a more specifically scoped value takes precedence, while `:root` provides a low-specificity baseline. section 10.2
Narrowing a button rule
A global `button` rule can restyle the stepper's buttons. Replacing it with `sample-component button.big-button` targets the component's buttons, and the added declarations remove effects such as shadows and padding that broke the component. section 9.1
sample-component button.big-button {
box-shadow: none;
text-shadow: none;
padding: 0;
}
Inspect the selector and declarations used to neutralize global button styling inside the component. section 9.1
