JSFiddle - React, Tailwind, and code Playground

HTML

<web-comp>
  <h4>hello 60--wcw light slotted</h4>
</web-comp>

<style>
  body{
    font-size: 20px;
  }
  h4 {
    width: calc(60 * var(--wcw));
    border: 2px solid lightblue;
  }
</style>

<template id=wc>
  <style>
    div {
      width: 50%;
      font-size: 10px;
      container-type: inline-size;
      /*--wcw: 0.1em;*/
      --wcw: 1%;
      /*--wcw: 1cqw;*/
      border: 2px solid red;
    }
    h4 {
      width: calc(60 * var(--wcw));
      border: 2px solid orange;
    }
  </style>
  <div>
    <slot></slot>
    <h4>hello 60--wcw shadow</h4>
  </div>
</template>

<script>
  customElements.define("web-comp", class WebComp extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode:"open"});
      this.shadowRoot.append(document.getElementById("wc").content);
    }
  });
</script>