Declarative shadowDOM

by WebComponents

HTML

<style>
  manga {
    display: grid;
    grid: 1fr/repeat(5, 1fr);
    background-color: rebeccapurple;
  }
</style>
<manga>
  <temani-kamado>
    <template shadowroot="closed">
      <style>
        .kamado {
          --s: #f8d7b6;
          width: min(100vmin, 445px);
          aspect-ratio: 1;
          margin: auto auto 0;
          position: relative;
          overflow: hidden;
          z-index: 0;
        }

        .kamado:after {
          content: "";
          position: absolute;
          width: 2.4%;
          height: 4%;
          background: #d29785;
          left: 47.6%;
          top: 69%;
          border-radius: 75% 25% 34% 66% / 60% 19% 81% 40%;
          clip-path: polygon(0% 50%, 65% 0, 100% 0, 100% 100%, 0 100%);
        }

        .kamado:before {
          content: "";
          position: absolute;
          right: 22%;
          top: 37%;
          width: 28%;
          height: 12%;
          background:
            linear-gradient(#6e293c 0 0) 100% 42%/16% 9%,
            radial-gradient(102% 102% at 0 100%, #0000 97%, #6e293c) 100% 59%/27% 23%,
            radial-gradient(farthest-side, var(--s) 96%, #0000) 39% 74%/13% 19%,
            linear-gradient(to bottom right, #0000 30%, var(--s) 34% 65%, #0000 70%)71% 79%/57% 35%,
            radial-gradient(farthest-side, var(--s) 96%, #0000) 44% 74%/14% 64%,
            radial-gradient(farthest-side, var(--s) 96%, #0000) 59% 67%/11% 29%,
            radial-gradient(farthest-side, var(--s) 96%, #0000) 78% 54%/18% 26%,
            radial-gradient(farthest-side, var(--s) 96%, #0000) 27% 100%/10% 33%,
            radial-gradient(farthest-side, var(--s) 96%, #0000) 40% 40%/16% 42%;
          background-repeat: no-repeat;
          z-index: 1;
          transform: skewX(-42deg);
        }

        .face {
          position: absolute;
          inset: 28% 22% 47% 23.5%;
          background:
            linear-gradient(var(--s) 0 0) 63% 80%/10% 10%,
            radial-gradient(farthest-side,...