if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('PlaceholderBoxPainter.js');
}

class PlaceholderBoxPainter {
    paint(ctx, size) {
        // Magic 🎩
    }
}

registerPaint('placeholder-box', PlaceholderBoxPainter);

if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('PlaceholderBoxPainter.js');
}

@supports (background: paint(slanted-bg)) {
  .el span {
    background: paint(slanted-bg);
  }
}

class SlantedBg {
  constructor () {
    this.hue = 110;
  }
  paint (ctx, geom, props, args) {
    // draw random colors
    ctx.fillStyle = 'hsl(' + this.hue + ', 100%, 50%)';
    this.hue += 10;

    ...
  }
}

registerPaint('slanted-bg', SlantedBg)

CSS.registerProperty({
  name: '--color-stop',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent'
})

@property --color-stop {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

.element {
  --color-stop: deeppink;
  background: linear-gradient(white, var(--color-stop))
  transition: --color-stop 1s;
}

.element:hover {
  --color-stop: deepskyblue;
}

@property --theme {
  syntax: '<color>+';
  initial-value: #fff;
  inherits: true;
}

if ("registerProperty" in CSS) {
  CSS.registerProperty({
    name: "--theme",
    syntax: "<color>+",
    initialValue: "#fff",
    inherits: true
  });
}

el.style.opacity = 0.5;
window.getComputedStyle(el).opacity === "0.5" // Strings!

el.attributeStyleMap.set('opacity', 0.5);

el.computedStyleMap().get('opacity')// CSSUnitValue {value: 0.5, unit: "number"}
el.computedStyleMap().get('opacity').value // 0.5

calc(1px - 2 * 3em)


new CSSMathSum(
  CSS.px(1),
  new CSSMathNegate(
    new CSSMathProduct(2, CSS.em(3))
  )
);