@property не распознается в теневом DOM ⇐ CSS

[Anonymous]

Теперь, когда @property недавно получил Firefox 128, я подумал, что было бы неплохо его опробовать.
Он прекрасно работает при использовании обычного HTML и CSS p>

Код: Выделить всё

@property --a1 {
syntax: '';
inherits: false;
initial-value: 10deg;
}

.hi1 {
border: 2px solid black;
width: fit-content;
margin: 0 auto;
}

.box1 {
--a1:10deg; /*  needed for firefox to have a valid output */
cursor:pointer;
width:250px;
height:200px;
margin:15px;
display:inline-block;
transition:--a1 0.5s;
background:linear-gradient(var(--a1),red ,blue);
}
.box1:hover {
--a1:180deg;
}

body {
text-align:center;
}

Код: Выделить всё

In regular DOM

Но если я использую его в теневом DOM, он внезапно полностью игнорируется .

Код: Выделить всё

const css = `@property --a2 {
syntax: '';
inherits: false;
initial-value: 10deg;
}

.hi2 {
border: 2px solid black;
width: fit-content;
margin: 0 auto;
}

.box2 {
--a2:10deg; /*  needed for firefox to have a valid output */
cursor:pointer;
width:250px;
height:200px;
margin:15px;
display:inline-block;
transition:--a2 0.5s;
background:linear-gradient(var(--a2),red ,blue);
}
.box2:hover {
--a2:180deg;
}`;

class MyComponent extends HTMLElement {
constructor() {
super();

const root = this.attachShadow({ mode: 'closed' });
root.innerHTML = `
${css}

In shadow DOM


`;
}

connectedCallback() {

}
}

customElements.define('my-component', MyComponent);

Код: Выделить всё

Есть идеи, почему и как я могу убедить это работать?
Вот код, иллюстрирующий проблему https://codepen.io/true-cc/pen/eYwYJaM

Подробнее здесь: https://stackoverflow.com/questions/787 ... shadow-dom