Is there a way to only show the waveform behind a region?

[ricky-c-2001]

I've taken a look at these discussions:

• (Help) Need to have different color inside region. #3794
• Show only the region on the track and hide the rest of the track #3162

The issue i've found with changing mix-blend-mode is that mix-blend-mode only interacts with its direct parent.

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

However, if you apply this property to a region, its direct parent isn't the waveform, it's a wrapper div. I found that if I apply the property to the wrapper div, you can get the desired effect, but since it's in the shadow dom I can't select it.

For example, if you change the css at https://wavesurfer.xyz/examples/?styling.js for #waveform ::part(region) to have mix-blend-mode it doesn't change anything.

I'm not sure if i'm missing something obvious. I'd appreciate any help.

Thanks

[katspaugh]

Don't think it's possible out of the box. ChatGPT suggested a solution involving CSS gradients and masks, perhaps worth exploring.

[ricky-c-2001]

I see, thanks for clarifying.

Would it ok to expose the regions container with a part attribute for example:

private initRegionsContainer(): HTMLElement {
    return createElement('div', {
      part: 'regions-container', // added this line
      style: {
        position: 'absolute',
        top: '0',
        left: '0',
        width: '100%',
        height: '100%',
        zIndex: '5',
        pointerEvents: 'none',
      },
    })
  }

Do you think this could be a reasonable addition, or would you prefer not to add it?
I can make a PR if wanted.

[katspaugh]

If it helps, sure, I don't mind.