Question

我希望在应用程序中公开动态调色板（~300个条目）作为CSS变量。今天它完全由JS管理 - 当内容生成时，调色板直接应用（例如通过将style ='rgb（...）'设置为新元素）。但是当调色板更新时，只有新内容使用新调色板。显然CSS变量解决了这个问题。

我已经将CSS变量用于其他功能，并且逻辑有效。粗略地说，html看起来像：

<html>
<head>
  <style>
    :root {
      --my-var: ...default value...;
      --some-other-var: ...;
    }
  </style>
</head>
</html>

使用相应的运行时JS代码，如：

document.documentElement.style.setProperty('--my-var', 'new-value');

当它运行时，它会更新<html>元素，所以它现在看起来像：

<html style="--my-var:new-value">
...same code as above...

如果我添加约300个新变量，<html>节点在DOM检查器中是不可读的，这会伤害我敏感的感觉。问题是，如何最好地管理这个w / out搞乱性能（假设将~300个变量附加到html节点还没有消除性能）？

我可以创建一个专用的<style>标记并生成文本内容以获得:root {...}代码，但浏览器的开销似乎要高得多 - 它必须从划伤并重新计算所有样式。即使只有一个sep <style>节点也可能比填充<html>更好，所以我可以有一个“调色板节点”来管理噪音，但设置一个样式元素的属性却没有（似乎）work - 属性设置，但没有效果。

我只是SOL吗？我对“只使用XXX框架以及所有你将被解决的问题”不感兴趣，除非这些框架用于说明他们不会在整个DOM节点上进行poo的基础CSS / JS行为。

在JavaScript

0 个答案: