为何@property定义的<length>类型自定义属性中em单位赋值不生效？

注意：由于@property兼容性较差，以下最小可复现示例（MRE）可能在部分浏览器中无法正常运行。

问题根因 #

该现象是@property规则的固有特性导致的：@property声明的initial-value是在自定义属性全局注册阶段就完成计算的，计算上下文为全局根上下文，而非使用该变量的元素的上下文。em是相对当前元素font-size的单位，全局注册阶段没有对应的元素font-size作为参照，因此这个初始值无法被正确解析为有效的长度值，最终var(--width1)会回退为默认的auto。而px是绝对单位，全局上下文可以直接解析出固定值，因此--width2可以正常生效。

可用解决方案 #

方案1：将em单位的赋值下沉到元素规则中 #

不要在@property的initial-value里定义em单位的初始值，改为在使用该变量的选择器中赋值，此时赋值的上下文为当前元素的上下文，em可以正常计算：

@property --width1 {
  syntax: '<length>';
  inherits: false;
  /* 可填写合法的绝对单位作为兜底值 */
  initial-value: 0;
}

#div1 {
  --width1: 20em;
  width: var(--width1);
}

方案2：改用rem作为相对单位 #

如果你的业务场景只需要相对于根元素字体大小的相对长度，可以把em替换为rem，rem的参照是全局固定的根元素font-size，在initial-value里可以正常解析：

@property --width1 {
  syntax: '<length>';
  inherits: false;
  initial-value: 20rem; /* 对应根字体大小的20倍，全局可正常计算 */
}

方案3：开启继承，在父级统一声明变量值 #

如果需要多个元素复用这个em单位的变量，可以将inherits属性改为true，然后在公共父元素上赋值--width1: 20em，所有子元素继承该值时会基于父元素的上下文计算，也可以正常生效：

@property --width1 {
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

/* 公共父元素规则 */
body {
  --width1: 20em;
}

内容的提问来源于stack exchange，提问作者Book Of Flames