Scoped CSS is a new feature that makes it possible to add <style> elements anywhere in your document, scoping the CSS rules it contains to its parent element. This was just what we needed while developing Snowball.
Unfortunately, support is limited to Firefox, and existing polyfills like scoped-polyfill and jQuery-Scoped-CSS weren’t working quite the way we needed. So I ended up creating a new polyfill for our project, which I’ve made available on GitHub.
To use Scoper, simply include scoper.js on your page.
How Scoper works is that for each <style scoped> element, the parent (or scoping) element is wrapped with a new element that’s been assigned a unique ID. This ID is prepended to all of its selectors.
Scoper should work in Chrome, Safari, and IE9+, with tests built using Mocha.
It is better to use div instead of span.
It is a little odd to see a span wrapping a div. But I went with a span because it won’t affect layout as much, like if you applied scoped style to an inline element.
Would be nice if you could include the “:scope” selector for the root.
https://developer.mozilla.org/de/docs/Web/CSS/:scope
Thanks for the suggestion, I’ve opened an issue for adding [cci inline]:scope[/cci] here:
https://github.com/thomaspark/scoper/issues/2
Just added support: https://github.com/thomaspark/scoper/commit/ebdf96cb871bff5431e4a12a663944f4aa99b0ac