@property not recognized in shadow DOM
Now that @property recently got shipped with firefox 128, I thought it would be a good idea to try it out.
It works just fine when using regular HTML and CSS
But if I use it in a shadow DOM, it suddenly gets completely ignored.
Any idea why or how I might convince it to work?
Here's a codepen illustrating the issue https://codepen.io/true-cc/pen/eYwYJaM
I've created a stackoverflow question too https://stackoverflow.com/questions/78717295/property-not-recognized-in-shadow-dom
Stack Overflow
@property not recognized in shadow DOM
Now that @property recently got shipped with firefox 128, I thought it would be a good idea to try it out.
It works just fine when using regular HTML and CSS
@property --a1 {
syntax: '<ang...
4 Replies
It looks like it's not working because it's not suppose to work at least in Level 1 of the CSS Properties and Values API : https://drafts.css-houdini.org/css-properties-values-api/#shadow-dom
there are bugs open in firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1884872) and Safari (https://bugs.webkit.org/show_bug.cgi?id=270586) and some conversation about letting this work in shadow dom in the future https://github.com/w3c/css-houdini-drafts/issues/939 but for now it's a no go.
maybe you can get around it by registering and declaring the property outside of the shadowDOM?
hmm I was trying to do it in uiverse https://uiverse.io/SelfMadeSystem/witty-rabbit-95 . I'll ask them if they could maybe make a script to do that, but I don't think it will work
Button by SelfMadeSystem made with CSS | Uiverse.io
This Button was posted by SelfMadeSystem. Tagged with: button. You can create your own elements by signing up.
thank you
Have you tried CSS.registerProperty in your JS ?