JSFiddle - React, Tailwind, and code Playground

by jagreehal

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Web Component Shadow Dom Themed</title>
    <link rel="stylesheet" href="https://jagreehal.github.io/styling-web-component-examples/styling-examples/todo.css">
    <script type="module" src="https://jagreehal.github.io/styling-web-component-examples/styling-examples/css-gremlins.js"></script>
    <script src="https://jagreehal.github.io/styling-web-component-examples/styling-examples/web-component-shadow-slot.js"></script>

  </head>
  <body style="max-width:800px">
    <section class="todoapp">
      <section class="main">
        <ul class="todo-list">
          <todo-item>
          <!-- your slotted content start -->
            <span class="my-class">          
              ⭐️ Slotted content using page .my-class style ⭐️
            </span>
            <!-- your slotted content end -->
          </todo-item>
        </ul>
      </section>
    </section>
  </body>
</html>

CSS

.my-class{
  color: rebeccapurple;
}