CSSStyleSheet object 无法克隆

Question

I would like to use a CSSStyleSheet object in a redux store. However when I try to clone this kind of object I get an empty object.

 const styleContainer = document.createElement('style') styleContainer.innerHTML = 'p{color:green}'; document.head.appendChild(styleContainer); const sheet = styleContainer.sheet console.log(sheet); // [Object] console.log({...sheet }); // {} console.log(Object.assign({}, sheet)); // {} console.log(JSON.parse(JSON.stringify(sheet))); // {}

Answer 1

When you type the following statement:

{ ...sheet }

it's probably translated into:

Object.assign({}, sheet);

or in essence Object.assign() can be rewritten as:

var newObject = {};

Object.keys(sheet).forEach((key) => {
  newObject[key] = sheet[key];
});

Which copies all enumerable properties to the newly created Object . prototype will not be copied either so even if the object solely relies on enumerable properties to function, it won't be the same object, neither a copy of it.

Also note that spread is a shallow copy, it's merely copying primitive types and references to objects and you can verify that empirically:

var b = { x: true }; 
var a = { b: b };

a.b == b // true
a.b == { x: true } // false

Back to CSSStyleSheet . All native classes visible in JavaScript are backed by native classes implemented in C/C++. You can confirm that empirically:

var s = new CSSStyleSheet()


s.addRule.toString()
// "function addRule() {
//    [native code]
//"

s.prototype
// undefined 

Note that functions on such objects say [native code] and there is no prototype.

When you spread such object, that connection with native class becomes severed and a generic Object is produced instead.

I would suggest to serialize the object yourself and then re-create it when you need it.

For example you could serialize CSS rules and store them in Redux:

var stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('p { color: green; }');

var payload = "";
var rules = stylesheet.cssRules;
for (var i = 0; i < rules.length; i++) {
  payload += rules[i].cssText + "\n";
}

reduxStore.dispatch({ type: 'STORE_CSS', payload: payload });

Then when you need to manipulate the CSS stylesheet, you could re-create the CSSStyleSheet object and feed it with CSS rules:

var stylesheet = new CSSStyleSheet();
stylesheet.replaceSync(payloadFromReduxStore);

Note that at the time of writing this, Safari does not support the programmatic instantiation of CSSStyleSheet objects but Firefox does.

So perhaps going via style tag would be necessary to workaround that, ie in some browsers:

vary styleContainer = document.createElement('style');
styleContainer.innerHTML = 'p { color:green }';
document.head.appendChild(styleContainer);

var stylesheet.replaceSync = styleContainer.sheet