Three cards — unscoped, scoped with @scope, and donut-scoped
The global rule .card h3 { color: #b91c1c; } leaks into this card — heading is red.
Styled with global descendant selectors. Any rule targeting .card h3 anywhere in the stylesheet will affect this heading, even from unrelated components.
Selectors inside @scope (.card-scoped) stay contained — they cannot leak out to affect other components.
The @scope block sets heading and text colors without polluting the global namespace. No scoped selector can accidentally affect an element outside this card.
to (.card-footer) excludes the footer subtree — it uses global styles, not scoped ones.
The heading and body are styled by @scope (.card-donut) to (.card-donut > .card-footer).
The footer below is excluded from the scope — its <a> link falls back to globally-defined styles instead of scoped ones.