Learn how to get the property value of CSS.registerProperty()

Question

I registered a property through the CSS.registerProperty method. The problem is that when I load the same component, a DOMException is thrown because such a property already exists.

I'm looking for a way to determine if there is a getter method for a similar property.

Run in a vue3 component.

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

This is the error message -> DOMException: Failed to execute 'registerProperty' on 'CSS': The name provided has already been registered.

Answer 1

From specification: https://drafts.css-houdini.org/css-properties-values-api/#registering-custom-properties

As far as I know, this is exactly how Chrome implements it. There's no intentional mechanism designed to access [[registeredPropertySet]], so you're already using what's probably the best possible approach: try/catch. Any property name that conflicts with this collection will throw a syntax error.