https://codepen.io/ujiro99/pen/bGKdeKy

script.js

const content = `
  <style>
    :host {
      --ul-color-1: green;
    }
    div { 
      border: 1px solid #ccc;
      padding: 1rem;
      color: red;
      font-family: sans-serif;
    }
    .list-1 {
      color: var(--ul-color-1, black);
    }
    .list-2 {
      color: var(--ul-color-2, black); 
    }
    .list-3 {
      color: var(--ul-color-3, black); 
    }
  </style>

  <div>
    Element with Shadow DOM.<br>
    <ul>
      <li class="list-1">A child element 1.</li>
      <li class="list-2">A child element 2.</li>
      <li class="list-3">A child element 3.</li>
    </ul>
  </div>
`;

const hosts = document.querySelectorAll(".shadow-host");
hosts.forEach((el) => {
  const shadow = el.attachShadow({
    mode: "closed"
  });
  shadow.innerHTML = content;
});

Shadow DOM and CSS Custom Properties

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat odit officiis necessitatibus laborum asperiores et adipisci dolores corporis, vero distinctio voluptas, suscipit commodi architecto, aliquam fugit. Nesciunt labore reiciendis blanditiis!</p>

<div class="shadow-host" style="--ul-color-3: orange;">

  <!-- Also could be a 
    <custom-element />
  -->

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat odit officiis necessitatibus laborum asperiores et adipisci dolores corporis, vero distinctio voluptas, suscipit commodi architecto, aliquam fugit. Nesciunt labore reiciendis blanditiis!</p>

shadow-dom-and-css-custom-properties.markdown

Shadow DOM and CSS Custom Properties

A Pen by ujiro99 on CodePen.

License.

style.scss

.shadow-host {
  --ul-color-2: blue;
  margin: 0 0 1rem 0;
}

body {
  max-width: 400px;
  margin: 1rem auto;
  padding: 0 1rem;
  font-family: "comic sans ms";
}