https://github.com/thomaspark/scoper

A polyfill for scoped HTML styles elements
https://github.com/thomaspark/scoper

css polyfill scoped scoper style

Last synced: 13 days ago
JSON representation

A polyfill for scoped HTML styles elements

• Host: GitHub
• URL: https://github.com/thomaspark/scoper
• Owner: thomaspark
• License: mit
• Created: 2015-06-22T23:24:05.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2021-10-11T14:41:48.000Z (about 3 years ago)
• Last Synced: 2024-10-13T17:00:48.835Z (26 days ago)
• Topics: css, polyfill, scoped, scoper, style
• Language: JavaScript
• Homepage:
• Size: 20.5 KB
• Stars: 82
• Watchers: 4
• Forks: 15
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Scoper

A polyfill for scoped HTML style elements.

* [Demo](http://jsfiddle.net/thomaspark/rpe402LL/)

# Quick Start

Just include `scoper.js` on your page to start using scoped HTML style elements.

Install via [npm](https://www.npmjs.com/package/css-scoper): `npm install css-scoper`

# How It Works

Each `` element's parent is wrapped with a `span` that is given a unique ID. Its rules are moved to `head` and all selectors prepended with their respective ID.

Scoper is only active when the page contains scoped styles and the browser doesn't support them.

# Tests

Tests can be run with the command `mocha test/test.js`.