Я разрабатываю автономный (для совместимости с Safari) веб-компонент, который должен вести себя как видео, но содержит холст (отображающий отфильтрованное видео):
Мне нужны слоты для HTMLSourceElement s это будет перенаправлено на видео.
В противном случае веб-компонент должен вести себя полностью как обычный HTMLVideoElement (атрибуты, CSS (который здесь находится в центре внимания) и т. Д. c.)
В настоящее время я использую тень Root - это AFAIK, необходимый для слотов внутри Web-компонента.
Само видео не находится в DOMTree of Shadow Root и используется исключительно в качестве текстуры видео для шейдера WebGL.
Я думаю, что упаковка всех атрибутов видео должна быть возможной без какого-либо (реального) различного функционального поведения (controls здесь не требуется).
У меня много проблем при попытке эмулировать поведение CSS видео с ShadowRoot. В частности, object-fit и поведение размера видео: object-fit: contain например, сохраняет соотношение и центрирует видео независимо от его ширины или высоты, тогда как по умолчанию ширина и высота - videoWidth и videoHeight* 1020. *
Я бы хотел избежать решения на основе Javascript (используя, например, window.getComputedStyle) для сохранения производительности.
Я пробовал различные CSS -только решения, но не смог воспроизвести поведение видео элемента еще. Возможно, есть более простые решения, чтобы заставить холст в тени Root вести себя как видео?