Question 221947 in CSS Question posted in
Some basic documentation can be found here.

How can we override css inside the shadow root?

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?

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search