JSFiddle - React, Tailwind, and code Playground

by yjbanov

HTML

<div id="shadow_root"></div>

<svg id="clip-path-svg" width="0" height="0">
  <defs>    
    <clipPath id="clip-path">
      <path d="M30,10 h100 a20,20 0 0 1 20,20 v100 a20,20 0 0 1 -20,20 h-100 a20,20 0 0 1 -20,-20 v-100 a20,20 0 0 1 20,-20 z" />
    </clipPath>
   </defs>
</svg>

<clipee id="clipee" slot="slot-1"
        style="position: absolute;
               transformOrigin: 0 0 0;
               background-color: #CCCCCC;
               width: 300px;
               height: 300px">
  <video src="https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4"></video>
</clipee>

JavaScript

let shadowRootDiv = document.querySelector('#shadow_root');
let shadowRoot = shadowRootDiv.attachShadow({mode: 'open'});
let clipPathSvg = document.querySelector('#clip-path-svg');

shadowRoot.appendChild(clipPathSvg);

let clip = document.createElement('clip');
shadowRoot.appendChild(clip);
clip.style.position = 'absolute';
clip.style.transformOrigin = '0 0 0';
clip.style.clipPath = 'url(#clip-path)';

// Removing the below causes the video to disappear in Safari.
// Probable cause: https://bugs.webkit.org/show_bug.cgi?id=200381
clip.style.width = '100%';
clip.style.height = '100%';

let slot = document.createElement('slot');
slot.name = 'slot-1';
clip.appendChild(slot);

let clipee = document.querySelector('#clipee');
shadowRootDiv.appendChild(clipee);