<!DOCTYPE html>
<html>
<head>
<style>
a {
  width: 200px;
  height: 200px;
}
b {
  background-image: paint(linkpainter);
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
  <a id="ancestor">
    <b id="target"></b>
  </a>
<script>
function addPaintletFromSource (src) {
  var uri = 'data:application/javascript;charset=utf-8;base64,' + btoa(src);
  CSS.paintWorklet.addModule(uri).then();
}

addPaintletFromSource(`
  class LinkPainter {
    paint(ctx, geom) {
      ctx.fillStyle = 'black';
      ctx.fillRect(0, 0, geom.width, geom.height);
    }
  }
  registerPaint('linkpainter', LinkPainter);
`);

ancestor.href = 'https://cs.chromium.org';
</script>
</body>
</html>