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

Question

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

My example below does not work.
How to make it work?

.bg-red {
  background: red;
}

.blend {
  mix-blend-mode: difference;
  color: white;
}

.isolate {
  isolation: isolate;
}

<div class="bg-red">
  <div class="blend">
    <h2>This text should <span class="isolate">(This one shouldn't)</span> be blended 
    </h2>
  </div>
</div>

Run codeHide result

View in JSFiddle

Answer 1

To do the job, you need to specify isolation before using mix-blend-mode. Thus, between the background and the text where you will apply mix-blend-mode, you need to have a wrapper where it is installed isotlation.

, h2, span. mix-blend-mode , isolation:

h2 {
  background: red;
}

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

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

<h2>
  <span>This text should</span>
  <div class="isolate"><span>(This one shouldn't)</span></div>
  <span> be blended</span>
</h2>

Hide result

mix-blend-mode h2, - :

.red {
  background: red;
}

h2 {
  mix-blend-mode: difference;
}

h2 span {
  color: white;
}

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

<div class="red">
  <h2>
    <span>This text should</span>
    <div class="isolate"><span>(This one shouldn't)</span></div>
    <span> be blended</span>
  </h2>
</div>

Hide result