compat component add/remove css class via lifecycle hooks to apply compat specific rules

public/css/Cis4/Cis.css

@@ -7,6 +7,11 @@ html {
   font-size: 0.875em;
 }
 
+body.compat,
+body.compat main#cis-main {
+	background-color: #fff;
+}
+
 .fhc-dark-bg{
 	background-color: var(--fhc-dark);
 	color:var(--fhc-light) !important;

public/js/components/Cis/Compat.js

@@ -16,9 +16,15 @@ export default {
 			return this.mode + '#' + this.path + '#' + this.query_string;
 		}
 	},
+	beforeMount: function() {
+		document.body.classList.add('compat');
+	},
 	mounted: function() {
 		this.srcUrl = this.buildSrcUrl();
 	},
+	beforeUnmount: function() {
+		document.body.classList.remove('compat');
+	},
 	watch: {
 		propsWatchHelper: function() {
 			if(this.lastLoadediFrameURL === '') {