如何获取CSS.registerProperty注册的属性？Vue3重复注册报错问题

当Vue3组件重复加载时，在onMounted钩子中调用CSS.registerProperty注册同一个自定义属性会抛出以下错误：

DOMException: 执行'CSS'上的'registerProperty'失败：提供的名称已被注册。

下面是几种可行的解决办法：

1. 优化try-catch逻辑（最简方案） #

重复注册的错误属于预期内情况，直接通过try-catch捕获并忽略该特定错误即可，不影响业务逻辑：

onMounted(() => {
  try {
    window.CSS.registerProperty({
      name: "--num",
      syntax: "<integer>",
      inherits: false,
      initialValue: 0,
    });
  } catch (error) {
    // 仅忽略重复注册的错误，其他异常仍抛出
    if (!(error instanceof DOMException && error.message.includes("already been registered"))) {
      throw error;
    }
  }
});

2. 用全局集合标记已注册属性 #

在全局作用域维护一个Set集合，记录已注册的自定义属性名称，注册前先做检查：

// 可将这段全局变量定义放在项目的公共工具文件或main.js中
window.registeredCSSProps = new Set();

onMounted(() => {
  const propName = "--num";
  if (!window.registeredCSSProps.has(propName)) {
    try {
      window.CSS.registerProperty({
        name: propName,
        syntax: "<integer>",
        inherits: false,
        initialValue: 0,
      });
      window.registeredCSSProps.add(propName);
    } catch (error) {
      console.error("注册CSS自定义属性失败：", error);
    }
  }
});

3. 全局初始化时注册一次（Vue3专属） #

如果这个自定义属性是全项目通用的，直接在Vue应用初始化时注册一次，避免组件重复注册：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 应用启动时仅注册一次
try {
  window.CSS.registerProperty({
    name: "--num",
    syntax: "<integer>",
    inherits: false,
    initialValue: 0,
  });
} catch (error) {
  if (!(error instanceof DOMException && error.message.includes("already been registered"))) {
    console.error("全局注册CSS自定义属性失败：", error);
  }
}

app.mount('#app');

注：目前浏览器没有提供直接获取所有已注册CSS自定义属性的API，因此上述方案是最实用的替代方案。

内容的提问来源于stack exchange，提问作者LegatusSexto