0

I have a web page which is the 3rd vendor app. In this page there is lots of code which creates some constructed styles. I wanted to create a chrome extensions to move one of divs around the page. I tried to inject JS and CSS but it worked only with normal styles, not constructed once. What could I do to change a Constructable Stylesheet, for example "width" value for the div in shadow DOM?

Update: replace will do a job as per comments below but how to find the shadow object is now a question

<!DOCTYPE html>
<html>
<body>
<script>
    body = document.querySelector("body");
    const shadow = body.attachShadow( {mode: 'open'});
    shadow.innerHTML = "<p>New2</p>";

    const bgPurple = new CSSStyleSheet();
    const everythingTomato = new CSSStyleSheet();

    bgPurple.replace(`p {font-weight: bold; }`);
    everythingTomato.replace(`* { color: tomato; }`);
    shadow.adoptedStyleSheets = [everythingTomato, bgPurple];
</script>

<script>
    const everythingTomato2 = new CSSStyleSheet();
    everythingTomato2.replace(`* { color: red; }`);
    shadow.adoptedStyleSheets = [everythingTomato2];
/*How to find "shadow" to use adoptedStyleSheets? The first code is given not clear, I can only change this one. */
</script>
</body>
</html>
Eugene
  • 10,957
  • 20
  • 69
  • 97
Player987321
  • 11
  • 1
  • What do you mean "Constructable Stylesheet"? Can you provide part of html/css and what do you wan to achieve.It may be necessary to make modifications in html after some time or event. – Darius Nov 07 '20 at 22:25
  • **Constructable StyleSheets**: https://developers.google.com/web/updates/2019/02/constructable-stylesheets. I am not 100% sure (haven't done much with them, they only work in Chrome for now) but I think you can only use ``replace`` and ``replaceSync`` on them. – Danny '365CSI' Engelman Nov 08 '20 at 08:26
  • Yes, you are right `replace` is the answer. The problem now is how to find the shadow object to use this on it. I will try to add an example to my question above. – Player987321 Nov 08 '20 at 10:31
  • Your code runs fine; You declared ``shadow`` on the global scope. If you don't have that then: ``document.body.shadowRoot`` will get you the reference (no need for querySelector on HTML elements like ``body`` , ``head``) because ``attachShadow`` both **sets AND returns** (this.)shadowRoot – Danny '365CSI' Engelman Nov 08 '20 at 13:52
  • @Danny'365CSI'Engelman thank you! You are right again, shadowRoot was what I needed. I didn't know where the code was attached so I have found it just using dir(body) in the console and in my real case it was custom element created after body. – Player987321 Nov 08 '20 at 20:18

1 Answers1

0

Constructable StyleSheets: https://developers.google.com/web/updates/2019/02/constructable-stylesheets

I am not 100% sure (haven't done much with them, they only work in Chrome for now) but I think you can only use replace and replaceSync on them

Your code runs fine; You declared shadow on the global scope. If you don't have that then: document.body.shadowRoot will get you the reference (no need for querySelector on HTML elements like body , head) because attachShadow both sets AND returns (this.)shadowRoot

You can chain everything:

super()
  .attachShadow({mode:"open"})
  .innerHTML="Hello Component"
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49