low 是定义低值区间的上限（min

low 属性必须大于 min 且小于 high 和 max

low 不是独立生效的阈值，它依赖整个范围定义。如果 min="0"、max="100"，那么 low="20" 合法，但 low="-5" 或 low="120" 会被浏览器忽略或归一化为边界值。

常见错误是把 low 当成“警告下限”随意设低，结果发现颜色没变——因为浏览器只在 [min, low] 区间内渲染“低值语义”，而该区间必须存在（即 low > min）才可能触发样式变化。

• low 值必须是数字，不能是字符串（如 low="twenty" 无效）
• 若未设置 low，浏览器不划分低值区间，整个条默认按中性色渲染
• Firefox 和 Chrome 对低值区的颜色映射略有差异，但都倾向用偏红/灰调表示

low 和 high 必须配合 value 才能体现语义颜色

单独写 15%，虽然 value 小于 low，但多数浏览器仍会把它当作“过低”状态（显示红色边框或背景），而不是“处于低区间”。真正触发“低区间”样式的前提是：min ≤ value ≤ low。

也就是说，low 定义的是一个**区间上限**，不是报警线。想让度量条在 0–20% 显示低值色，就得确保 value 落在这个闭区间里，而不是靠它“跌破”来提醒。

• 典型误用：low="20" + value="5" → 期望红色填充，实际可能只显示红色边框（语义为“过低”，非“低区间”）
• 正确做法：若需 0–20% 均为低色，应设 low="20" 并确保 value 在 0–20 之间
• high 同理，只有 high ≤ value ≤ max 才算“高区间”，否则是“过高”

low 影响颜色但不控制填充长度

low 不改变 的视觉长度计算逻辑——填充比例永远由 (value - min) / (max - min) 决定。它只参与浏览器内置的颜色语义判定，且该判定不可通过 CSS 直接覆盖（伪元素如 ::-webkit-meter-inner-element 才能干预）。

这意味着你不能靠 low “截断”填充区域，也不能用它做条件渲染。它纯粹是辅助无障碍和语义表达的信号属性。

• 填充长度只取决于 value、min、max 三者
• 颜色语义（低/中/高/最优）由 low、high、optimum 共同决定，但受浏览器实现限制
• 无障碍读屏器会结合 low 解读当前值是否“偏低”，所以设错会影响可访问性

动态更新时 low 必须同步修改 attribute

用 JavaScript 改变 low 时，必须操作 DOM attribute，而不是仅改 property：

const meter = document.querySelector('meter');
meter.setAttribute('low', '10'); // ✅ 正确，触发重绘和语义更新
meter.low = 10; // ❌ 无效，property 修改不触发浏览器重新评估区间

这是因为 low 是 HTML 属性（attribute），其语义解析发生在 attribute 变更时。property 赋值不会通知渲染引擎重算颜色区间。

• 同理，min、max、value、high、optimum 都必须用 setAttribute()
• 如果用框架（如 React/Vue），注意它们默认绑定的是 property，需显式用 attr: 或 v-bind:attr 等方式
• 修改后建议检查 meter.hasAttribute('low') 确认是否写入成功

最易被忽略的一点：low 的语义价值高度依赖 optimum。没有 optimum，浏览器无法判断“低”是好还是坏；设了 optimum 但 low 它不在合理位置（比如 optimum="90" 却 low="85"），反而会让颜色逻辑混乱。别只盯着 low 单独调参。