CODEWITHSUNDEEP
javascriptcsssquarespaceshadow-root
Kainoa Liu
Kainoa Liu

Reputation: 1

How to customize elements in a #shadow-root (open)

I am trying to customize a third-party code to match the colors on our Squarespace website. The third party has an open #shadow-root on their footer, but I'm still unable to customize part of the code. What I'm trying to do is change the background-color to #ff0000;

I've tried to target .formFooter in CSS, but from what I've tried, it hasn't worked. Here is their code below through inspector:

    <div>
     #shadow-root (open)
     <style></style>
    <div class="formFooter-heightMa sk"></div>
    <div class="formFooter f6 branding21 ">∞</div>flex)
    == $0
    <style id="action-styles">
    </style>
    </div>
    </form>

And here is their style:

    .formFooter {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        background-color: #0A1551;

Upvotes: 0

Views: 66

Answers (1)

Danny &#39;365CSI&#39; Engelman
Danny &#39;365CSI&#39; Engelman

Reputation: 21253

host-context is a Chromium only party

And works inside-out not outside_into shadowRoot

There is no signal Mozilla and Apple will implement host-context

Disclaimer: I did not test below code for typos

Since its an open shadowRoot, you can "get in" with JavaScript

<div id="that-component">
     #shadow-root (open)
        <div class="formFooter"></div>
</div>

with

document
  .querySelector("#that-component")
  .shadowRoot
  .insertAdjacentHTML( 
     "afterbegin",
     "<style>.formFooter{ background:rebeccapurple }</style>"
  )

Or do it the Web Component Author way

Set a part:

https://developer.mozilla.org/en-US/docs/Web/CSS/::part

document
  .querySelector("#that-component")
  .shadowRoot
  .querySelector(".formFooter")
  .part = "formfooter"

and then from Global CSS

<style>
  #that-component::part(formfooter) {
    background: rebeccapurple;
  }
</style>

The latter is more flexible since there are no timing issues; the CSS will be applied no matter what order HTML is altered.

Upvotes: 0

Related Questions