学习如何获取CSS.registerProperty()的属性值

Question

我通过CSS.registerProperty方法注册了一个属性。问题是，当我加载相同的组件时，会抛出DOMException异常，因为这样的属性已经存在。

我正在寻找一种方法来判断是否存在类似的属性的getter方法。

在一个vue3组件中运行。

onMounted( () => {
  try {
      window.CSS.registerProperty({
    name: "--num",
    syntax: "<integer>",
    inherits: false,
    initialValue: 0,
  });
  } catch (error) {
    if(error instanceof DOMException){
      console.log(error)
    }
  }
}

这是错误信息 -> DOMException: Failed to execute 'registerProperty' on 'CSS': The name provided has already been registered.

Answer 1

来自规范： https://drafts.css-houdini.org/css-properties-values-api/#registering-custom-properties

据我所知，这正是Chrome的实现方式。没有任何有意的机制设计用于访问[[registeredPropertySet]]，所以您已经在使用可能是最好的可行方法：try / catch。与该集合冲突的任何属性名称都将抛出语法错误。