как разрешить light dom css применяться к элементам shadow dom?

class MyEL extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'}).innerHTML = `
    <style>
    .outer {
      color: var(--myColor, 'black');
    </style>
    <div class="outer">
      <h4>Title</h4>
      <slot></slot>
    </div>`;
  }

  static get observedAttributes() {
    return ['bgcolor'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    if (oldVal !== newVal) {
      this.shadowRoot.querySelector('.outer').style.backgroundColor = newVal;
    }
  }

  get border() {
    return this.shadowRoot.querySelector('.outer').style.border;
  }
  set border(value) {
    this.shadowRoot.querySelector('.outer').style.border = value;
  }
}

customElements.define('my-el', MyEL);

setTimeout(() => {
  document.querySelector('my-el').border = '2px dashed blue';
},1000);

const btn = document.getElementById('toggle');
let color = '';
btn.addEventListener('click', () => {
  color = color === '' ? 'white' : '';
  document.querySelector('my-el').style.setProperty('--myColor', color);
});

<my-el bgcolor="red"></my-el>
<hr/>
<button id="toggle">toggle</button>

customElements.define('css-test', class extends HTMLElement {
  constructor() {
    super();
    var shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<h1>Header</h1>
    <p>This is a <strong>strong</strong> string</p>
    <p>This is <em>emphasis<em>.`;
  }
});

const styles = document.createElement('style');
styles.textContent = `
* {
  background-color: #900;
  border: 1px solid #9876;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0 0 4px #0005;
  color: #fff;
  font: 24px Tahoma;
  margin: 20px;
  padding 20px;
  text-align: center;
  text-decoration: #ffd wavy underline;
  text-shadow: 3px 3px 3px #0008;
  transform: rotate(30deg);
}`;

function toggleCss(evt) {
  if(styles.parentElement) {
    styles.remove();
  }
  else {
    document.body.appendChild(styles);
  }
}
const toggleEl = document.getElementById('toggle');
toggleEl.addEventListener('click', toggleCss);

  <css-test></css-test>
  <hr/>
  <button id="toggle">Toggle CSS</button>

customElements.define('css-test', class extends HTMLElement {
  constructor() {
    super();
    var shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<style>
    :host * {
      background: white;
      color: yellow;
      font-size: 14px;
    }
    </style><h1>Header</h1>
    <p>This is a <strong>strong</strong> string</p>
    <p>This is <em>emphasis<em>.`;
  }
});

const styles = document.createElement('style');
styles.textContent = `
* {
  background-color: #900;
  border: 1px solid #9876;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0 0 4px #0005;
  color: #fff;
  font: 24px Tahoma;
  margin: 20px;
  padding 20px;
  text-align: center;
  text-decoration: #ffd wavy underline;
  text-shadow: 3px 3px 3px #0008;
  transform: rotate(30deg);
}`;

function toggleCss(evt) {
  if(styles.parentElement) {
    styles.remove();
  }
  else {
    document.body.appendChild(styles);
  }
}
const toggleEl = document.getElementById('toggle');
toggleEl.addEventListener('click', toggleCss);

<css-test></css-test>
  <hr/>
  <button id="toggle">Toggle CSS</button>

customElements.define("my-element", class extends HTMLElement {
  constructor() {
    super();

    // Add a `span` element to the component's light-DOM.
    const span = document.createElement("span");
    span.innerHTML = "Hello, World!";
    this.appendChild(span);

    // Add a `slot` element to the component's shadow-DOM (so that the light-DOM gets rendered).
    this.attachShadow({ mode: "open" }).innerHTML = "<slot></slot>";
  }
});

<my-element></my-element>

customElements.define("my-element", class extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" }).innerHTML = `
      <style>
        * {
          position: relative;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        :host {
          display: inline-block;
          height: 150px;
          width: 200px;
        }
        #outer {
          height: 100%;
          padding: 20px;
          background: lightblue;
          border: 5px solid blue;
        }
        #inner {
          height: 100%;
          background: lightgreen;
          border: 5px solid green;
        }
      </style>
      <div id="outer" part="foo">
        <div id="inner" part="bar">
        </div>
      </div>
    `;
  }
});

#second {
  width: 300px;
}

#second::part(bar) {
  background: lightcoral;
  border: 10px dotted red;
}

<my-element id="first"></my-element>
<my-element id="second"></my-element>