JSFiddle - React, Tailwind, and code Playground

by Amens

JavaScript

const numberUpTo = (from) => {
  return Math.floor(from * Math.random());
};

const randomize = (len = 10, base, firstLetter) => {
  let output = '';

  base = (base === true) ? 16 : (base || 10);

  if (firstLetter) {
    output = String.fromCharCode(numberUpTo(26) + 97);
  }

  while (output.length < len) {
    output += Math.random().toString(base).substr(2);
    output = output.substr(0, len);
  }

  return output;
};

///////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////

let stylesMap = {};

const css = (strings, ...selectors) => {
  let result = ``;

  strings.map((selector, index) => {

    let hash = (index <= selectors.length - 1) ? randomize(7, 36, true) : ``;
    stylesMap[selectors[index]] = hash;
    result += selector + hash;
  });
  console.log(stylesMap);
  return result;
}


document.head.innerHTML += css `<style>
    .${'firstClass'} {
      background: yellow;
      text-decoration: underline;
    }
    .${'secondClass'} {
      background: green;
    }
  </style>`

document.body.innerHTML += `
    <div class="${stylesMap.firstClass}" ${stylesMap.firstClass}>
      <span class="${stylesMap.secondClass}" ${stylesMap.secondClass}>testeros</span>
    </div>
  `
const spanEl = document.querySelector('.' + stylesMap.secondClass);

spanEl.insertAdjacentHTML("beforeend", `test`);

/* <script>
    const randomClass = Math.random().toString(36).substring(7);
    const styles = `<style>.${randomClass} {color: blue}</style>`
</script>

<svelte:head>
{@html styles}
</svelte:head>

<article class="{randomClass}">
    <h2>
        <slot name="name">
            test
            <span class="missing">Unknown name</span>
        </slot>
    </h2>

    <div class="address">
        <slot name="address">
            <span class="missing">Unknown address</span>
        </slot>
    </div>

    <div class="email">
        <slot name="email">
            <span class="missing">Unknown...