Add new CSS properties in Chromium to be used through V8 Javascripting engine

[Sumit Goyal]

I am using chrome V8 scripting engine. I want to add new CSS properties to V8/Chrome to be interpreted by my application when integrated with Chromium and V8.

I am trying following code:-

Object.defineProperty(CSSStyleDeclaration.prototype, "myproperty", {
    get: function () {
        return (this.getPropertyValue('-my-property'));

    },
    set: function (myproperty) {
        return this.setProperty("-my-property", myproperty);
    },  
});`

element.style.myproperty = 'customvalue';
console.log(element.style.myproperty);

Output:- Empty string

But this code does not work and 'myproperty' is not set.

If instead of '-my-property', I use the name prefixed with double hyphen '--my-property', it works fine.

But I want to add new properties with single prefix.

I googled and found that one option is that I need to get complete chromium code, add my new CSS property and check the code:-

https://www.chromium.org/blink/runtime-enabled-features

As this is very lengthy process, I just want to know if there is any other option to add a new CSS property and get/set it through Element.style.prop. For example is there any possibility through any of the following:-

• CSS Polyfills.
• Chrome Extensions.
• Extending V8 by making it aware of new properties( I searched and found that for this option I have to run V8 in embedded mode and provide the complete C++ implementation. Just want to know if it is possible to provide implementation for only new properties and reused the existing ones.).

Thanks in advance.