| <!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> |