Jump to content

Recommended Posts

Posted (edited)

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 by pstein
  • pstein changed the title to How to overwrite a ":host" CSS rule value?
Posted

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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...