root.css
:root {
--color-1: red;
}
.color{
color: var(--color-1)
}root2.css
:root {
--color-1: green;
}
.color{
color: var(--color-1)
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./root.css" rel="stylesheet" />
<link href="./root2.css" rel="stylesheet" id="root2" />
<style>
.bg {
background-color: var(--color-1);
}
</style>
</head>
<body>
<div class="color">1111</div>
<div class="bg">2222</div>
</body>
</html>Now the text color is green
Enter in console
document.getElementById('root2').setAttribute('disabled', '')The text color remains the same. The expected text color should be red
Disabling to become available is normal
- <link href="./root2.css" rel="stylesheet" id="root2" />
+ <link href="./root2.css" rel="stylesheet" id="root2" disabled />
Enter in console
document.getElementById('root2').removeAttribute('disabled', '')The reason is that the listening change function is not supported
Any change to the Disabled property should be reprocessed
function isValidAttributeMutation(mutation) {
let isValid = false;
// mutation： MutationRecord
// addedNodes: NodeList []
// attributeName: "disabled"
// attributeNamespace: null
// nextSibling: null
// oldValue: null
// previousSibling: null
// removedNodes: NodeList []
// target: link#root2
// type: "attributes"
if (mutation.type === 'attributes' && isLink(mutation.target) && !isDisabled(mutation.target)) {
const isEnabledMutation = mutation.attributeName === 'disabled';
const isHrefMutation = mutation.attributeName === 'href';
const isSkipNode = mutation.target.getAttribute('data-cssvars') === 'skip';
const isSrcNode = mutation.target.getAttribute('data-cssvars') === 'src';
// Enabled
if (isEnabledMutation) {
isValid = !isSkipNode && !isSrcNode;
}
// Href
else if (isHrefMutation) {
if (isSkipNode) {
mutation.target.setAttribute('data-cssvars', '');
}
else if (isSrcNode) {
resetCssNodes(settings.rootElement, true);
}
isValid = true;
}
}
return isValid;
}by the way：
Parsed cssTree and pasreVars should be cached and not re-parsed the original content of unchanged link and style，
If the cache exists, use it directly. Remove cssTree and VARS caches when link and style elements change again
if(node.__cssVars.cssTree) {
Object.assign(variableStore.dom, node.__cssVars.nodeVars);
return;
}
// ...
const nodeVars = parseVars(cssTree, {
parseHost: Boolean(settings.rootElement.host),
// store : variableStore.dom,
onWarning: handleWarning
});
Object.assign(variableStore.dom, nodeVars);
// Cache data
node.__cssVars.tree = cssTree;
node.__cssVars.vars = nodeVars;
root.cssroot2.cssindex.htmlNow the text color is green
Enter in console
The text color remains the same. The expected text color should be red
Disabling to become available is normal
Enter in console
The reason is that the listening change function is not supported
Any change to the Disabled property should be reprocessed
by the way：
Parsed cssTree and pasreVars should be cached and not re-parsed the original content of unchanged link and style，
If the cache exists, use it directly. Remove cssTree and VARS caches when link and style elements change again