If we give a `container-name` to the root of all our unique components, we can scope styles to them with a simple @container query.

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

CSS name-only containers (supported in Safari 26.4+) offer a native scoping mechanism for component styles. By assigning a container-name to each component's root element without specifying a container-type, developers can write @container blocks that scope styles to that component without conflicts — no build tools, no specificity hacks, no BEM required. This approach mirrors what CSS Modules does programmatically, but uses the web platform directly. The author argues @scope fell short of this use case, while name-only containers finally deliver the component-level style isolation developers have long wanted.

Name-Only Containers: The Scoping We Needed – Frontend Masters Blog

Components typically already have unique names.