Need a solution for allowing custom elements to be a CanvasImageSource
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 9.4k
- Forks
- 3.2k
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 38
Description
Custom elements with shadow trees that contain a video, img or canvas element cannot be passed to CanvasRenderingContext2D.prototype.drawImage. Instead, the element needs to be exposed, breaking encapsulation.
<x-video name="vid1" autoplay>
#shadow-root
<video ...></video>
<!-- other stuff -->
</x-video>
var vid = document.querySelector('x-video');
canvasContext.drawImage(vid, 0, 0, vid.width, vid.height);
Initially, I thought this could be an extension to ShadowRoot, but @annevk suggested at https://github.com/w3c/webcomponents/issues/388 to file the issue here so that it can be tackled from the drawImage side.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the HTML Canvas drawImage and CanvasImageSource behavior described in the issue, then review the linked webcomponents issue 388. Read the custom-element shadow-tree example and the discussion to determine whether a standards-level direction exists; done means an agreed solution that preserves encapsulation and can be specified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, javascript
- Domain
- computer-graphics, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100