paint(workletName, ...parameters)

where:

workletName

The name of the registered worklet.

parameters

Optional additional parameters to pass to the paintWorklet

In JavaScript, we register the paint worklet:

CSS.paintWorklet.addModule('boxbg.js');

...then, in the CSS, we define the background-image as a paint() type with the worklet name, boxbg, along with any variables (ex. --boxColor and --widthSubtractor) the worklet will use:

li {
   background-image: paint(boxbg);
   --boxColor: hsla(55, 90%, 60%, 1.0);
}
li:nth-of-type(3n) {
   --boxColor: hsla(155, 90%, 60%, 1.0);
   --widthSubtractor: 20;
}
li:nth-of-type(3n+1) {
   --boxColor: hsla(255, 90%, 60%, 1.0);
   --widthSubtractor: 40;
}

The result will be the following:

You can pass additional arguments via the CSS paint() function. In this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline:

li {
   --boxColor: hsla(55, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
   --boxColor: hsla(155, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, filled,  3px);
}

li:nth-of-type(3n+1) {
   --boxColor: hsla(255, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, stroke, 1px);
}

We've included a custom property in the selector block defining a boxColor. Custom properties are accessible to the PaintWorklet.

• PaintWorklet
• CSS Painting API
• Using the CSS Painting API
• <image>
• canvas