Open
Description
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;Metadata
Assignees
Labels
No labels