學習如何取得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.c​​ss-houdini.org/css-properties-values-api/#registering-custom-properties

據我所知，這正是Chrome的實現方式。沒有任何有意的機制設計用於存取[[registeredPropertySet]]，所以您已經在使用可能是最好的可行方法：try / catch。與該集合衝突的任何屬性名稱都會拋出語法錯誤。