Как можно менять ::backdrop через JS?

Question

[Hidden Fronter]

Пытаюсь поменять ::backdrop у тега dialog через cssText. Не выходит. Прописываю так:

document.querySelector("dialog").cssText += `
::backdrop { background: red; }
`;

Answer 1

[mr Anderson]

const style = document.createElement('style');
style.textContent = `
  dialog::backdrop {
    background: red;
  }
`;
document.head.appendChild(style);

И по памяти, ::backdrop — это псевдоэлемент, и он не может быть напрямую изменён через свойство cssText в js.
Только через стили CSS, которые можно обновлять с помощью js, ну или через класс

document.querySelector('dialog').classList.add('custom');

dialog.custom::backdrop {
  background: red;
}

Можно динамически добавить или изменить стили для ::backdrop через тег