How to return the properties of CSS.registerProperty()

Question

I have 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 am looking for a way to know if there is a getter for properties or similar.

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)
    }
  }
}

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

score 1 · Answer 1 · answered Feb 16 '23 at 11:30

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

the Document object gains a new [[registeredPropertySet]] private slot, which is a set of records that describe registered custom properties.

As far as I can tell, that is exactly how Chrome has implemented it. There is absolutely no intentional mechanism designed to access the [[registeredPropertySet]], so you are already using what might be the best viable approach: try / catch. Any property name colliding with that set will throw a syntax error.

How to return the properties of CSS.registerProperty()

1 Answers1