JSFiddle - React, Tailwind, and code Playground

by Steve Muchow

HTML

<style type="text/css">
      p {background:#22ab22;color:white;}
      a {outline:1px solid yellow;color:white;}
      p.bordered {border:3px solid white;}
    </style>
<p><button onclick="$.scoped();">Enable scoping</button></p>
    <p>ForestGreen background, white text</p>
    <p class="bordered">White border. <a href="#nowhere">Yellow outline</a>.</p>
    <section>
      <!-- Scoped block -->
      <style type="text/css" scoped="scoped">
        p {background:#ffdead;color:black;}
        a {outline:1px solid black; color:black;}
        p.bordered {border:3px solid black;}
      </style>
      <p>NavajoWhite background, black text</p>
      <p class="bordered">Black border. <a href="#nowhere">This should have a black outline</a>.</p>
    </section>
    <section>
      <!-- Scoped block -->
      <style type="text/css" scoped="true">
        @import url('external.css');
        p {background:#ff4500;color:white;}
        a {outline:1px solid white;}
      </style>
      <p>OrangeRed background, white text</p>
      <p class="bordered">No border. <a href="#nowhere">White outline</a>. External @import.</p>
    </section>
    <section>
      <p id="addLive">Click to dynamically add scoped style block. Rerun to update the page.</p> 
    </section>

CSS

body {
  margin: 0 auto;
  background: #646362;
  text-align: center;
  width: 75%;
  font-family: helvetica, arial, sans-serif;
}

p {
  padding: 1em;
  margin: 1em;
  border-radius: 5px;
}

JavaScript

/*
 *  jQuery Scoped CSS plugin
 *  This adds support for the CSS scoped attribute to limit a block of style declarations
 *  to a specific area of the HTML. You can also use @import and media filters in scoped blocks
 *  http://www.w3.org/TR/html5/semantics.html#the-style-element
 *
 *  Simon Madine, 1 February 2011
 *
 *  Use:
 *  Include this plugin file (minified, ideally) and call $.scoped() on load
 *
 *  Limitations:
 *  - If you're using multiple nested declarations, Webkit might apply different inheritance
 *    specificity rules from the other engines. I don't know who's right.
 *  - Sometimes there are delays parsing externally loaded stylesheets (via @import) and they
 *    might get skipped. Not often but it happens.
 *
 *  Notes:
 *  - If the browser natively supports <style scoped>, this will return without doing anything
 *  - Style elements really shouldn't have classes added to them. This functionality should
 *    probably use some kind of data attribute.
 *  - Currently, getElementStyles is hand-rolled and probably wrong.
 *
 *  v0.6 2013-04-08
 *  Removed $.browser requirement and refactored a bit so it runs slightly faster and works with
 *  jQuery 1.9. Also checks for native scoped style support and exits early if available.
 *
 *  v0.5 2011-01-30
 *  Sibling blocks work, most nested blocks work but some oddness in Webkit means that some
 *  styles don't inherit correctly when there are multiple nested declarations.
 *
 *  v0.4 2011-01-29
 *  First jQuery plugin version. Works for most cases but gets confused when there are
 *  multiple scoped blocks affecting the same context (siblings).
 *
 */
(function($) {
  "use strict";
  //Add this to the global jQuery object as we want to apply this once to the entire document
  $.scoped = function() {
    if ('scoped' in document.createElement('style')) {
      return;
    }

    // To detect which method to use when setting styles
    // IE9 pretends to use setProperty but doesn't
    var...