How to use CSS combination of mix-blend-mode and isolation?

Question

I have a parent element with a red background. I want an h2 element to blend just some words with the background, and other words, inside a span tag, no.

My example

Answer 1

In order to make it working you need to specify the isolation before applying the mix-blend-mode. So between the background and the text on where you will apply mix-blend-mode you need to have a wrapper where isotlation is set.

Here is an example where the background is applied on the h2 and inside we have many span. We apply mix-blend-mode on them and we wrap the non-needed one with another wrapper where we apply isolation:

h2 {
  background: red;
}

h2 span {
  mix-blend-mode: difference;
  color: white;
}

.isolate {
  isolation: isolate;
  display: inline-block;
}

  This text should
  
(This one shouldn't)
   be blended

But if you apply mix-blend-mode on the h2 you won't be able to isolate any of its content:

.red {
  background: red;
}

h2 {
  mix-blend-mode: difference;
}

h2 span {
  color: white;
}

.isolate {
  isolation: isolate;
  display: inline-block;
}

  

    This text should
    
(This one shouldn't)
     be blended