Example

Style.scoped() creates a unique scoping className which must be set on the root element from where your scope is to originate. In the example below we have two ul elements. First ul element had Style.scoped() called which returned a '_scoped-1' string used as the scoping className. When Style.CSS( { 'li' : { color: 'red' } } ) is called next the .CSS method automatically receives the scoping class generated by Style.scoped(). Style.CSS prefixes this class onto each selector transforming them into descendant selectors of the unique scoping class, thus Styles are scoped.

Style objects processed below both target all li elements on the page, however they are automatically scoped so they do not affect one another.

If the root element needs to be styled, pass in a className into Style.scoped('myChosenRootClassName') and style the class as you would any other, it will be automatically scoped as a union selector (e.g., .root._scoped-1), meaning both the 'root' and '_scoped-1' classes must be present to be targeted by your style rule.

This allows you to target and style the scope root element like you would any other.

• foo
• bar

• baz
• klutz

			var ulElements = document.querySelectorAll('ul');
			
			var firstUlElement = ulElements[0];
			firstUlElement.className = Style.scoped();
			var firstUlStyle = document.createElement('style');
			firstUlStyle.type = 'text/css';
			firstUlStyle.innerHTML = Style.CSS( { 'li' : { color: 'red' } } );
			document.head.appendChild(firstUlStyle);

			var secondUlElement = ulElements[1];
			secondUlElement.className = Style.scoped();
			var secondUlStyle = document.createElement('style');
			secondUlStyle.type = 'text/css';
			secondUlStyle.innerHTML = Style.CSS( { 'li' : { backgroundColor: 'khaki' } } );
			document.head.appendChild(secondUlStyle);

			// See how both styles target all li? They do not impact each other
			// because each is scoped--this is called subtree scoping and is natively
			// supported in Firefox; native support has not landed in other browsers yet
			// so this serves as a poly-like-fill. If you're using React
			// it is reccomended to use 'reactive-root' for putting CSS in your JS