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

HTML & CSS
1

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

2

:host in the shadow dom and not directly accessible.

You may find some clues in this SO post or perhaps the escape hatch technique mentioned at the end of this article.


const element = document.querySelector('your element id here')
const style = document.createElement('style')
style.innerHTML = ':host {width:50%}'
element.shadowRoot.appendChild(style)

I’m afraid my knowledge of the shadow dom (and JS) is very poor :frowning:

If you want the video smaller then why don’t you target the actual html that holds the video and make that smaller?

3

Are you sure you are asking how to overwrite?

Experts (such as author Nicolai M. Josuttis) in the German language explain that people that speak German can get the English words overwrite and override confused.

4

You can override a :Host CSS rule value using the ::ng-deep selector or a more specific selector like this:
::ng-deep :host { /* new styles here */ }