I'm adding the clip text style to dom-to-image, because chrome must use -webkit-background-clip style to expose the text clip effect, but dom-to-image use cssText will clear -webkit-background-clip style.

It is a patch that replace the background and adds the background clip.

const _serializeToString = XMLSerializer.prototype.serializeToString;
XMLSerializer.prototype.serializeToString = function (node) {
  return _serializeToString
    .call(this, node)
    .replace(
      /background-image:/g,
      '-webkit-background-clip: text; background-image:',  // Add the -webkit-background-clip
    );
};

The problem is that if I have a background that does not have clipping it does not work, because this solution assumes that all the background gradient will want -webkit-background-clip on it.

This is rendered with clip text

.board-name-gradient {
  background: -webkit-linear-gradient(#ffffff, #b2b2b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  overflow: hidden;
  position: absolute;
  top: 50px;
  width: 300px;
  white-space: nowrap;
}

Doesn't need clip and it's overwritten (not rendered)

.board-setup::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: overlay;
  z-index: 3;
}

So i should add a condition to check if clip text must be added:

XMLSerializer.prototype.serializeToString = function (node) {
  const value = _serializeToString.call(this, node);

  if (does not have clip text) {
    return value;
  }
  
  return value.replace(
      /background-image:/g,
      '-webkit-background-clip: text; background-image:',  // Add the -webkit-background-clip
    );
};

How can I replace the background clip only if the style should have the clip text effect?