<!DOCTYPE html>
<div style="clip-path: url(#c)"></div>
<svg height="0">
<clipPath id="c" clipPathUnits="objectBoundingBox">
<rect width="0.5" height="1"/>
</clipPath>
</svg>
<script>
let div = document.querySelector('div');
div.attachShadow({ mode: 'open' });
div.shadowRoot.innerHTML = '<div style="width: 100px; height: 100px; background-color: green; clip-path: inherit; border-right: 100px solid red"></div>';
</script>