I think Mozilla element() - old age.
About
I suggest alternative for CSS element(). I suggest CSS4 image property paint-source(id_or_name).
With this API can be used any element that have paint-source for canvas. Element can be located in shadow DOM, or document. Element should have “id” for identity. These elements: img, canvas, video. Also possible register any paint source for CSS through JS.
Examples
/* Declare DOM id of paint source directly */
.paint {
background-image: paint-source("#domcanvas");
}
/* Declare path to paint source of element, or parent (should defined by JS) */
.paint2 {
background-image: paint-source("anyjs");
}
JS
I suggest [element].style.setPaintSource(name, paintSource) for any DOM element, that applies paint source to this element, and every children.
let canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
let ctx = canvas.getContext("2d");
let imageData = ctx.getImageData(0, 0, 100, 100);
document.body.style.setPaintSource("anyjs", imageData);
Also, setPaintSource available not only for document, but for any element, like CSS variables.
let canvas = document.createElement("canvas");
//...
image.style.setPaintSource("mycanvas", canvas)
Paint API
Paint source can be applied with CSS Paint API.
.some {
--image: paint-source("anything");
background: paint(something);
}
DOM Element JS
Available for any parent element. Set paint source from DOM.
element.style.setPaintSourceFromId("anyjs", "element");
Advantages
Pro:
- No need recursion detection
- Used only recommended elements for canvases
- Flexible as CSS variables
- Can be emulated through CSS variables and dynamic exporting images
Con:
- No background, border, text, etc… I think this is not need!
- Required static size (except
background-size)
Limitation
These paint source NOT applying element background images, colors, etc.
Function paint-source() declare to draw only video or image data to background of element.
Sources for paint-source() should have intrinsic size. So SVG should be rasterized or defined size.