nilaallj
KPCKevin Powell - Community
•Created by dimal on 9/14/2024 in #front-end
How to achieve BEM / CSS Module type scoping with @scope
@scope provides selector isolation, not style isolation. This means that color and other inheritable properties still reaches beyond the scope limit. That is expected and according to the specification.
You get this problem in your second example because the inner element still inherits normally from its ancestors.
When using @scope it often makes sense to only declare inheritable values on very generic selectors, such as p, span, h2, figcaption etc. Or on wrappers that doesn’t have descendants beyond the scope limit.
Hope it helps! 🙂3 replies