Edit in JSFiddle

<!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.js"></script>
    <style>
      :root {
        --todo-item-background-color: orange;
        --todo-item-color: blue;
        --todo-destroy-color: black;
      }
    </style>
  </head>
  <body style="max-width:800px">
    <section class="todoapp">
      <section class="main">
        <ul class="todo-list">
          <todo-item text="Web component using CSS variables"></todo-item>
        </ul>
      </section>
    </section>
  </body>
</html>