How to overwrite a ":host" CSS rule value?

[pstein]

I have a web page which contains an element (embedded video).

The element refers to a CSS rule similar to

:host { width: 100%; }

When I manually (!) overwrite (in WebDeveloper pane) the 100% value  by 50% then the video is shown only half the size on webpage. Good.

Now I want to automatize the overwrite and replace this value from a *.user.js script.

Unfortunately the following does NOT work:

GM_addStyle(":host { width: 50% !important; }");

I guess its because of the leading colon in CSS rule.

How else can I overwrite the CSS value and the enforce a 50% dimension

 

Edited November 23 by pstein

[Ingolme]

I haven't heard of the host selector before so I looked it up on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:host

It seems like the host selector only works if the CSS rule itself is written somewhere inside the shadow DOM. I don't know what GM_addStyle() does but it probably is writing the CSS rule to a different place. The examples in the reference page I linked above might help you.