How can we override css inside the shadow root?

Question

I have some CSS for the span tag. All of these are rendered inside the shadow-root. Which looks like the following.

.class-name-a .class-name-b > span {
border-left: var(--css-token-right-statement-border-left);
font-family: GilroySemiBold;
font-size: 16px;
margin-left: var(--css-token-right-statement-spacing);
order: 3;
padding-left: var(--css-token-right-statement-spacing);}

How can we override the CSS for this span tag?

Answer 1

try using !important example

    .class-name-a .class-name-b > span {
  border-left: new-value !important;
  font-family: new-font !important;
  font-size: new-size !important;
  margin-left: new-value !important;
  order: new-value !important;
  padding-left: new-value !important;
}

Answer 2

Your question is unclear. I think you are asking how to write another declaration block that would override the declaration block that you included in your question.

In order to do so, you'll need to match or increase the specificity of the selector. This is easily done by using the same selector:

.class-name-a .class-name-b > span

Related info: Cascade, specificity, and inheritance

---

This example snippet shows the second declaration block for span overrides the same property values that are declared in the first and third declaration blocks for span.

:root {
  --css-token-right-statement-border-left: 100px dashed;
  --css-token-right-statement-spacing: 100px;
}

.class-name-a .class-name-b > span {
  margin-left: var(--css-token-right-statement-spacing);
  padding-left: var(--css-token-right-statement-spacing);
  color: darkorange;
  background-color: aliceblue;
  border-left: var(--css-token-right-statement-border-left);
}

.class-name-a .class-name-b > span {
  margin-left: 1em;
  padding-left: 1em;
  color: red;
  background-color: yellow;
  border-left: 1em double;
}

span {
  margin-left: 500px;
  padding-left: 500px;
  color: blue;
  background-color: black;
  border: 2px solid;
  border-left: 500px solid;
}

<div class="class-name-a">
  <p class="class-name-b">
    <span>StackOverflow</span>
  </p>
</div>