Working with the `CSSstyleSheet` API
- Changing the selectorText -

Continuing story in the exchange of views in the topic css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom, especially about the CodePen 'Changing the SelectorText'.
These test pages are stand-alone, so the CodePen machine can not influence the results.
Tested are Firefox, Chrome, Opera and IE-11 on desktop under Windows-7.

Test 1 - the original script reused (with other selectors)

First a Google Font is added as a stylesheet link. After that, the initial CSS is put into 2 style blocks in the <head>> of this document. The first style block has the general styles of this page, the second has the styles for testing.
Note: the script is considering the 3 style items in the <head>> as 3 stylesheets (the 2 style blocks are seen as 2 separate "stylesheets". - The document.styleSheets javascript is inline at the bottom, before the </body> tag.

Testing a style update

Use the Developer Tool of the browser and go to the 2nd <style> block in the <head>.
Click right and "Edit as HTML".
Delete the word main of the selector rule main code { ... }
Delete the whole style rule .testbox-1 { background: turquoise; color: black } and leave the editor by clicking somewhere in the Developer Pane outside the editor box.
Then use the button to update the selectorText via the CSSStyleSheet API.

This is ".testbox1"This is ".testbox2"

The initial selectorText for each style rule of the 2nd style block is:

* main code .testbox1 .testbox2

The updated selectorText for each style rule of the 2nd style block is:

* code .otherClass

What should happen

Initially both testboxes are turquoise with black text.
After the change of the CSS the "testbox1" should be green with a white text, because the deleted .testbox1 line (turquoise/black) in the second style block was overruling the green/white of the first style block.
After updating with Javascript (button click) the "testbox2" should be also green with a white text, by a special javascript instruction:

The ".testbox2" of the second style block is removed and replaced by the ".otherClass". But even if this class is in the first style block: .otherClass {background: darkblue; color: white}, this one does nothing, because this "otherClass" is not connected to the unchanged "testbox2" class in the HTML of the body (!). So for "testbox2" we are falling back again to the green/white of the first style block.

The update will be reflected in the displayed result above. - In the same way you can play with other selectorText's.

Note: in this scope you can not see in the update box if the rules themselves are changed: only the updated selectorTexts (tag names, class names etc.) are displayed.

Results

The results of this test version are as follows:

For the left box with the initial selectorText the script is working as intended.
The "testbox1" is changing immediately to green/white when you leave the editor (as intended). So there is no CSS problem.
In the update box the .testbox2 is replaced by .otherClass (this part of the script is working).
But:
in the update box the word main is not removed, also the .testbox1 is not removed, and the "testbox2" style is not changed to green/white after clicking the button (those parts of the script aren't working).
The results are the same for Firefox, Chrome and Opera.
IE-11 does still nothing, but should support the CSSstyleSheet in general, according to the compatibility list of MDN. Note: the MSDN (MicroSoft Developers Network) is for "CSSstyleSheet" redirecting directly to the Mozilla page.
(Google "CSSstyleSheet site:microsoft.com" > https://msdn.microsoft.com/en-us/library/aa358796(vs.85).aspx ).
Offline (downloaded and used locally): no difference.
Surprise:
- If you (reload and) click the button without changing anything, the "testbox2" is switching to green! (which is correct)
- Extra surprise: if you (reload and) only delete the comment line in the 2nd style block (or only add an extra space into the comment line), and click the button: the "testbox2" is not switching to green! (which is not correct)
- Note: in these cases the displayed "expected selectorText's" in the right box are not longer correct.

Conclusions

The CodePen was not telling the truth, the whole truth and nothing but the truth.
There must be some leak(s) in the javascript ...

codePen stand-alone results < PREVIOUS NEXT > version 2

Working with the CSSstyleSheet API - Changing the selectorText -